js 定时器

js 提供了一些原生方法来实现延时去执行某一段代码; 如: setTimemout, setInterval, setImmediate, requestAnimationFrame

1. setTimeout

延迟指定时间后执行某一段代码

// 设置定时器
let timerId = setTimeout(func, delay);

timeId : 定时器ID;
func: 延迟后执行的函数;
delay: 延迟的时间, 默认值为0;

// 清除定时器
clearTimeout(timeId);

• 示例:

 for (var i = 0; i < 5; i++) {
      setTimeout(function () {
          console.log(i);
      }, 0);
    }
// 5 , 5 , 5 , 5 , 5

• 解析:

当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前JS代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5

2. setInterval

以固定的时间间隔重复使用给一个函数或代码段

// 设置定时器
let intervalId = setInterval(func, delay);

intervalId : 重复操作的ID;
func: 延迟后调用的函数或代码段;
delay: 延迟的时间, 没有默认值;

// 清除定时器
clearInterval(intervalId );

3. setImmediate

在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和 node.0.10+中有实现), 类似 setTimeout(func, 0);

let immediateId = setImmediate(func);

immediateId : 定时器ID;
func: 回调函数

4. requestAnimationFrame

专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定（帧）;

let requestId = requestAnimationFrame(func);

requestId : 定时器ID;
func: 回调函数