| WebAPI：setTimeout 机制

前置知识

浏览器页面是由消息队列和事件循环系统来驱动的

初认识

定时器基础使用：

function showMsg(){
  console.log('3000ms 后的惊喜');
}
console.log('等惊喜...');
var timerID = setTimeout(showMsg, 3000);

当然，你也可以在定时器执行前，取消执行计划：

var isCancle = true;

var test = function(){
  var grade = 0;
  console.log('等惊喜...');

  // 定义定时器回调函数
  function showMsg(){
    grade = 100;
    console.log('3000ms 后的惊喜：grade=' + grade);
  }
  // 设置定时器
  var timerID = setTimeout(showMsg, 3000);
  // 控制是否取消定时器
  if(isCancle){  
    clearTimeout(timerID);
    console.log('等不到惊喜了！');
  }else{
    console.log('惊喜在路上！');
  }
};

test();

实验截图：

image.png

机制分析

执行一段异步任务，往往需要先将任务添加到消息队列中，事件循环系统就会按照消息队列中的顺序来执行事件。不过，通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，所以不能将定时器的回调函数直接添加到消息队列中。浏览器对 setTimeout 做了什么处理呢？

延迟队列。在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列，这个队列中维护了需要延迟执行的任务列表，包括了定时器和 Chromium 内部一些需要延迟执行的任务。JavaScript 创建的定时器回调任务就是被维护在延迟队列中。

注意事项

1. 定时器任务的执行不会总是如约而至
   当前任务执行时间过久，从而导致定时器设置的任务被延后执行

function bar() {
    console.log('定时器任务被执行了')
}

function foo() {
    setTimeout(bar, 0);
    for (let i = 0; i < 5000; i++) {
        console.log(i)
    }
}

foo();

在上面这段代码中，定时器设置了 0 延时的回调，事实上浏览器并不是这么做的，因为被当前任务阻塞了。

实验截图：

日志.png 性能分析.png

2. setTimeout 设置的回调函数中的 this 不符合直觉
   如果被 setTimeout 推迟执行的回调函数是某个对象的方法，那么该方法中的 this 关键字将指向全局环境（开启了全局执行上下文），而不是定义时所在的那个对象。

'use strict'

var name= 1;
var MyObj = {
  name: 2,
  showName: function(){
    console.log(this.name);
  }
}

setTimeout(MyObj.showName,1000);// 1
MyObj.showName();// 2

3. 其他
   • 定时器嵌套调用，系统会设置最短时间间隔 4ms
   • 未激活的页面，setTimeout 执行最小间隔是 1000 毫秒
   • 延时执行时间有最大值，溢出将导致立即执行