原生js进阶教程 - 18.动画库、同步异步 - 《原生 JavaScript 教程》

动画封装、同步异步

动画封装、同步异步

一、封装动画库

// Effect 运动方式
const Effect = {
    Linear: function (curTime, begin, change, duration) {
        return change / duration * curTime + begin;
    }
};
function animate({ele, target = {}, duration = 2000, after}) {
    // 1. 参数校验
    if (!ele || ele.nodeType !== 1) {
        throw TypeError('ele is not a DOM ELEMENT')
    }
    // 2. 准备动画需要的参数
    const {css} = window.utils;
    // 2.1 根据 target 中传入的属性，计算这些属性的起始位置以及这些属性的运动距离
    let begin = {};
    let change = {};
    // 遍历 target 对象
    for (let k in target) {
        if (target.hasOwnProperty(k)) {
            begin[k] = css(ele, k); // 用 css 方法获取元素的起始位置
            change[k] = target[k] - begin[k]; // 获取元素运动的路程
        }
    }
    // 2.2 记录当前时间
    let time = 0;
    // 2.3 设置 interval
    let interval = 16;
    // 3. 创建动画定时器
    ele.timer && clearInterval(ele.timer); // 每次开始新的动画时停止上一次的动画
    ele.timer = setInterval(() => {
        time += interval;
        if (time > duration) {
            css(ele, target);
            clearInterval(ele.timer);
            // 调用钩子函数
            if (typeof after === 'function') {
                after.call(ele); // 让 after 执行，并且把 after 中的 this 修改成 ele
            }
            return;
        }
        let curState = {};
        // 计算当前元素的位置
        for (let k in target) {
            if (target.hasOwnProperty(k)) {
                curState[k] = Effect.Linear(time, begin[k], change[k], duration)
            }
        }
        // 把当前元素的相应的属性设置为当前状态
        css(ele, curState);
    }, interval)
}

调用：

animate({
    ele: box,
    target: {
        left: 800,
        top: 500
    },
    duration: 2000,
    after: function () {
        alert('终于跑完了')
    }
});

二、定时器

定时器：设定一个定时器，并且设置了等待时间，等时间到了，浏览器会把定时器的回调函数执行了
定时器是挂载在 window 上的方法
浏览器中常用的定时器

1. window.setTimeout(callback, timeInterval) 到时间后执行一次，也称为超时调用
callback: 到达时间后需要执行的方法（设定定时器时传入的第一个参数只是函数定义，并不是函数执行，真正执行是在时间到了以后，浏览器去执行这个函数）
timerInterval: 时间间隔

let n = 0;
setTimeout(() => {
    n++;
    console.log(n);
}, 1000);

2. window.setInterval(callback, timeInterval) 每隔一定时间就会执行一次，也称为间歇调用

callback: 到达时间后需要执行的函数
timerInterval: 时间间隔

3. setTimeout和setInterval方法都会返回一个定时器ID，是一个数字；

4. 清除定时器

clearTimeout 和 clearInterval：这两个方法可以清除指定的定时器；
一旦定时器被清除，不管这个定时器是否发挥过作用（回调函数是否执行过），里面的回调函数都会停止执行；

思考题：

let t = 1000;
setInterval(() => {
    console.log('123')
}, t);
setTimeout(() => {
    t = 5000
}, 50);
// ? setInterval 定时器执行间隔是多少？为什么？

三、同步和异步

同步和异步

JS 中在执行的时候把 js 代码分成了同步执行任务和异步执行任务

同步执行：

当前执行任务是按照顺序依次处理，当前这件事没有彻底做完，下一件事是执行不了的，

异步执行：当前这件事需要过一会儿再做或者执行时机不确定（定时器是过一会儿才会执行，js 中的事件是执行时机不确定），此时浏览器不是傻傻的等这件事做完，而是继续执行后面的任务，当后面的任务完成后，再去把没做完的事情做完。

JS 中的常见的异步执行：

所有的事件函数都是异步执行的 box.onclick = function …..
所有的定时器的回调函数都是异步执行 setTimeout(callback, time)
AJAX 中的异步情形
回调函数也是异步编程

异步编程：编写异步执行的程序称为异步编程，js 的异步处理机制是 js 这门语言最大的特殊。

let n = 0;
setTimeout(() => {
    n++;
    console.log('abc')
}, 3000);
console.log(n); // ? 这里输出 n 的值是多少？是

浏览器是如何实现异步机制的呢？

js 是单线程的，它一次只能干一件事。而能实现异步，是依赖于浏览器的任务队列实现的。浏览器中有两个任务队列：主任务队列和等待任务队列；

主任务队列：主任务队列放的都是当前需要同步执行的同步任务；
等待任务队列：把不需要立刻执行的异步任务都放到等待任务队列中

当主任务队列中的任务执行结束后，就去执行等待任务队列中的任务，看看哪些任务该执行了，如果某个任务该执行了，那么浏览器就会执行它。如果有多个都达到执行条件了，谁先到的就先执行谁。

注意：如果主任务队列中的代码执行不完，那么等待任务队列中的任务是不会执行的；

setTimeout(() => console.log('结束啦'), 1000);
while (true) {
    // while 循环是个同步任务
}

死循环就相当于主任务队列没有执行完，所以即便定时器到了时间也没办法执行

// => 思考题
setTimeout(() => {
    console.log(1);
}, 2000);
console.log(2);
setTimeout(() => {
    console.log(3)
}, 3000);
console.log(4);
setTimeout(() => {
    console.log(10)
}, 0);
for(let i = 0; i < 9999999; i++) {}
console.log(5);
setTimeout(() => {
    console.log(6)
}, 1400);
console.log(7);
setTimeout(() => {
    console.log(8)
}, 1500);
console.log(9);
// ? 输出顺序是啥？

定时器的事件写0也不是同步任务，只要是定时器就是异步任务，也需要等到所有的同步任务都执行完成再执行等待任务队列中的任务。因此即使写0，浏览器也存在等待和反应时间，这个时间依赖于浏览器版本以及操作系统和硬件，当设置的最小时间小于这个时间时，定时器使用的就是自身最小的反应和等待时间。
当主任务队列自上而下的执行的时候，如果遇到一个异步操作，浏览器不会等着这个异步的操作，而是先把这个异步任务添加到等待任务队列中排队
当主任务队列中的任务执行完成后，才会去等待任务队列中（如果主任务队列执行不完，不管等待任务队列中的任务时候到达时间，都不会执行）；
等待任务队列中谁先到达条件了（如果有多个都到达条件了，谁先到的就先处理谁），就把这个任务放到主任队列中执行，执行完再去等待任务找…

四、回调函数

回调函数是什么？

把一个函数 A 当做实参传递给另一个函数 B，在函数 B 执行的时候，在需要的地方就会把 A 执行，我们把这种机制称为“回调函数机制”；

回调函数的特点：

根据需求回调函数可以被执行 N 次；
不仅可以把回调函数执行，还可以给传递的回调函数传递实参，这样在回调函数中设置形参（或者使用 ARG）接收即可
还可以改变回调函数中的 this 指向
可以在宿主函数（它在哪里执行，它的宿主函数就是谁）中接收回调函数执行的返回结果

传递一个匿名函数：

let fn = (callback) => {
    // callback
    // callback && callback.call(obj, 100, 200);
    // typeof callback === 'function' ? callback() : null;
    let res = callback(10, 20);
    console.log(res);
};
fn(function (n, m) {
    console.log(this, n, m);
    return n + m;
});
// 此时 function (n, m) {....} 就是回调函数 它是被当成实参传递给fn函数的。fn就是其宿主函数

传递一个函数名:

function goo(n, m) {
    return n + m;
}
fn(goo); // 此时 goo 就是回调函数

常见的内置的回调函数：

定时器
数组 sort 方法
数组 forEach
数组 map 方法

实现一个 forEach 方法

let forEach = (iteratorable, callback) => {
    for (let i = 0; i < iteratorable.length; i++) {
        callback(iteratorable[i], i);
    }
};
let ary = [1, 2, 3];
forEach(ary, function (item, index) {
    console.log(item, index)
});

五、Promise

Promise: 是 ES6 新增的类（new Promise），目的是为了【管理】JS 中的异步编程的；

let p = new Promise();
p.then();

promise 对象有三个状态，
pending (准备：初始化成功，开始执行异步任务)
fulfilled (成功：异步处理成功)
rejected (失败：异步处理异常)

创建一个 Promise 实例

new Promise(() => {
    // new Promise 时，创建 Promise 的一个实例时，会立即会把当前函数体中执行
    setTimeout(() => {
        console.log(3);
    }, 1000);
    console.log(1); // 先输出 1
}).then();
console.log(2); // 再输出 2

Promise 是同步的，是用来管理异步的；

如何管理异步呢：

new Promise((resolve, reject) => {
    // Promise 的回调函数有两个形参，这两个形参代表着两个函数（将来浏览器调用 Promise 回调时传进来的）
    // resolve：当异步操作执行成功，我们执行 resolve 方法
    // reject：当异步操作执行失败，我们执行 reject 方法
    setTimeout(function () {
        resolve('Oh yeah!');
    }, 3000);
}).then((res) => {
    // => 第一个传递的函数是 resolve（现在可以这么说）
    console.log('成功 ', res)
}, (err) => {
    // => 第二个传递的函数是 reject
    console.log('完犊子 ', err);
});

六、异步的 ajax

let val = null;
let xhr = new XMLHttpRequest();
xhr.open('GET', 'js/1.js', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    val = xhr.responseText;
  }
};
xhr.send();
console.log(val); // 如果使用异步的 AJAX 请求，不等 AJAX 彻底完成，就把 VAL 输出，此时的结果是 null；
// 这是为什么？因为 console.log(val) 是同步任务；此时，AJAX 是异步任务，异步任务的执行晚于 console.log(val) 同步任务，就是说在打印 val 时，ajax 还没执行完，所以 val 的值还是 null
// ? 这怎么办？
// 1. 使用回调函数
function ajax(callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'js/1.js', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(null);
}
function getData(data) {
  console.log(data);
}
ajax(getData);
// 2. 使用 Promise 解决
let p = new Promise((resolve, reject) => {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'js/1.js', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 成功
      let val = xhr.responseText;
      resolve(val);
    }
    if (xhr.status === 4 && xhr.status !== 200) {
      // 失败
      reject('完蛋');
    }
  };
  xhr.send();
});
p.then((data) => {
  console.log(data)
}, (err) => {
  console.log(err)
});

18.动画库、同步异步