【JavaScript】 JavaScript定时器深入解析

2017-03-31

JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

一.setTimeout()

setTimeout可用来指定某个函数或某段代码，在多少毫秒之后被放到任务队列中，且仅仅执行一次。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

1	var timerId = setTimeout(func\|code, delay, args)

第一个参数func|code表示可以接受一个函数的名称或者一段代码，第二个参数指定推迟多少毫秒后被放到任务队列（并不意味着马上会被执行，下文会详细描述原因），除了前两个参数，还允许传入更多的参数，它们将被传入待推迟执行的函数中。

1.接受的第一个参数：func|code

第一个参数func|code表示可以接受一个函数的名称或者一段代码。

（1）接受一个函数的名称

function f(){
  console.log(2);
}

setTimeout(f,1000);
// 或者
setTimeout(function (){console.log(2)},1000);

（2）接受一段代码

需要注意的是，推迟执行的代码必须以字符串的形式，放入setTimeout，因为引擎内部使用eval函数，将字符串转为代码。一方面eval函数有安全顾虑，另一方面为了便于JavaScript 引擎优化代码（比如对于常用的 JavaScript代码压缩工具（YUI Compressor、Google ClosureCompiler）会将这些内容当做单纯的字符串，而不是函数，从而不会对其处理与压缩），所以这种方法很少使用。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 上面代码的输出结果就是1，3，2，因为`setTimeout`指定第二行语句推迟1000毫秒再执行。

2.接受的第一个参数：delay

第二个参数指定推迟多少毫秒后被放到任务队列（并不意味着马上会被执行），默认为0。

这里有一个很大的误区就是，当设定时间之后，很多人认为在指定延迟时间到达后会立即执行定时器，其实不是。设定一个 150ms 后执行的定时器不代表到了 150ms 后代码就立刻执行，它仅表示代码在 150ms 后被加入到任务队列中。如果在这个时间点上，主线程上的所有同步任务都执行完毕，并且任务队列上没有其他任务，那么这个任务会被执行；如果主线程上的同步任务未执行完毕，或任务队列上还存在其他异步任务（包括时间更短的定时器），这时候就要等待以上同步任务和异步任务执行完毕之后，这个指定任务才会开始执行。

3.额外的参数

除了前两个参数，还允许传入更多的参数，它们将被传入待推迟执行的函数中。

setTimeout(function(a,b){
  console.log(a+b);
},1000,1,1);
// 1s后输出2

4.注意

（1）this 问题

如果被setTimeout推迟执行的回调函数是某个对象的方法，那么该方法中的this关键字将指向全局环境，而不是定义时所在的那个对象。

var x = 1;

var o = {
  x: 2,
  y: function(){
    console.log(this.x);
  }
};

setTimeout(o.y,1000);
// 1

再看一个不容易发现错误的例子。

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}

var user = new User('John');

setTimeout(user.sayHi, 1000);
//undefined

上面代码只会显示undefined，因为等到user.sayHi执行时，它是在全局对象中执行，所以this.login取不到值。

为了防止出现这个问题，一种解决方法是将user.sayHi放在函数中执行。

1
2
3

setTimeout(function() {
  user.sayHi();
}, 1000);

上面代码中，sayHi是在user作用域内执行，而不是在全局作用域内执行，所以能够显示正确的值。

（2）最短时间问题

HTML 5标准规定，setTimeout的最短时间间隔是4毫秒。为了节电，对于那些不处于当前窗口的页面，浏览器会将时间间隔扩大到1000毫秒。另外，如果笔记本电脑处于电池供电状态，Chrome和IE 9以上的版本，会将时间间隔切换到系统定时器，大约是15.6毫秒。

二.setInterval()

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

<input type="button" onclick="clearInterval(timer)" value="stop">

<script>
  var i = 1
  var timer = setInterval(function() {
    console.log(2);
  }, 1000);
</script>

上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。

下面是一个通过setInterval方法实现网页动画的例子。

var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
  opacity -= 0.1;
  if (opacity >= 0) {
    div.style.opacity = opacity;
  } else {
    clearInterval(fader);
  }
}, 100);

上面代码每隔100毫秒，设置一次div元素的透明度，直至其完全透明为止。

==>可见，setInterval的一个常见用途是实现轮询。

1.关于时间间隔

setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，有可能出现后一次开始执行的时间减去前一次执行结束时的时间的差值小于指定的时间。比如，setInterval指定每100ms执行一次，每次执行需要5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee, 2000);
}, 2000);

上面代码可以确保，下一个对话框总是在关闭上一个对话框之后2000毫秒弹出。

根据这种思路，可以自己部署一个函数，实现间隔时间确定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv, wait);
  };

  setTimeout(interv, wait);
}

interval(function(){
  console.log(2);
},1000);

上面代码部署了一个interval函数，用循环调用setTimeout模拟了setInterval。

2.HTML 5标准规定

HTML 5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

3.Best Practise

《JavaScript高级程序设计(第三版)》建议，使用超时调用（setTimeout）来模拟间歇调用（setInterval）的是一种最佳模式，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

三.clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {
  var gid = setInterval(clearAllTimeouts, 0);

  function clearAllTimeouts() {
    var id = setTimeout(function() {}, 0);
    while (id > 0) {
      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();

运行上面代码后，实际上再设置任何setTimeout都无效了。

四.运行机制

setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。

这意味着，setTimeout和setInterval指定的代码，必须先等到本轮Event Loop的所有同步任务都执行完，再等到本轮Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

1 2	setTimeout(someTask, 100); veryLongTask();

上面代码的setTimeout，指定100毫秒以后运行一个任务。但是，如果后面的veryLongTask函数（同步任务）运行时间非常长，过了100毫秒还无法结束，那么被推迟运行的someTask就只有等着，等到veryLongTask运行结束，才轮到它执行。

这一点对于setInterval影响尤其大。

setInterval(function () {
  console.log(2);
}, 1000);

(function () {
  sleeping(3000);
})();

上面的第一行语句要求每隔1000毫秒，就输出一个2。但是，第二行语句需要3000毫秒才能完成，请问会发生什么结果？

结果就是等到第二行语句运行完成以后，立刻连续输出三个2，然后开始每隔1000毫秒，输出一个2。也就是说，setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出Ajax请求）。

五.一些特殊情况

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？

答案是不会。因为上一段说过，必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。也就是说，setTimeout的真正作用是，在“消息队列”的现有消息的后面再添加一个消息，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行。

setTimeout(f, 0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“消息队列”指定的任务）一结束就立刻执行。也就是说，setTimeout(f, 0)的作用是，尽可能早地执行指定的任务。而并不是会立刻就执行这个任务。

1
2
3

setTimeout(function () {
  console.log('你好！');
}, 0);

上面代码的含义是，尽可能早地显示“你好！”。

setTimeout(f, 0)指定的任务，最早也要到下一次Event Loop才会执行。请看下面的例子。

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) {
  console.log("a() 开始运行");
  b(x);
  console.log("a() 结束运行");
}

function b(y) {
  console.log("b() 开始运行");
  console.log("传入的值为" + y);
  console.log("b() 结束运行");
}

console.log("当前任务开始");
a(42);
console.log("当前任务结束");

// 当前任务开始
// a() 开始运行
// b() 开始运行
// 传入的值为42
// b() 结束运行
// a() 结束运行
// 当前任务结束
// Timeout

上面代码说明，setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。

即使消息队列是空的，0毫秒实际上也是达不到的。根据HTML 5标准，setTimeout推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个setTimeout(f, 0)语句连续执行，造成性能问题。

西维蜀黍