定时器

jiezi

6 年前

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务。
setTimeout()
setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func|code, delay);
上面代码中，setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。
console.log(1);
setTimeout(‘console.log(2)’,1000);
console.log(3);
// 1
// 3
// 2
上面代码会先输出 1 和 3，然后等待 1000 毫秒再输出 2。注意，console.log(2) 必须以字符串的形式，作为 setTimeout 的参数。
如果推迟执行的是函数，就直接将函数名，作为 setTimeout 的参数。
function f() {
console.log(2);
}

setTimeout(f, 1000);
setTimeout 的第二个参数如果省略，则默认为 0。
setTimeout(f)
// 等同于
setTimeout(f, 0)
除了前两个参数，setTimeout 还允许更多的参数。它们将依次传入推迟执行的函数（回调函数）。
setTimeout(function (a,b) {
console.log(a + b);
}, 1000, 1, 1);
上面代码中，setTimeout 共有 4 个参数。最后那两个参数，将在 1000 毫秒之后回调函数执行时，作为回调函数的参数。
还有一个需要注意的地方，如果回调函数是对象的方法，那么 setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象。
var x = 1;

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

setTimeout(obj.y, 1000) // 1
上面代码输出的是 1，而不是 2。因为当 obj.y 在 1000 毫秒后运行时，this 所指向的已经不是 obj 了，而是全局环境。
为了防止出现这个问题，一种解决方法是将 obj.y 放入一个函数。
var x = 1;

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

setTimeout(function () {
obj.y();
}, 1000);
// 2
上面代码中，obj.y 放在一个匿名函数之中，这使得 obj.y 在 obj 的作用域执行，而不是在全局作用域内执行，所以能够显示正确的值。
另一种解决方法是，使用 bind 方法，将 obj.y 这个方法绑定在 obj 上面。
var x = 1;

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

setTimeout(obj.y.bind(obj), 1000)
// 2
setInterval()
setInterval 函数的用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
var i = 1
var timer = setInterval(function() {
console.log(2);
}, 1000)
上面代码中，每隔 1000 毫秒就输出一个 2，会无限运行下去，直到关闭当前窗口。
与 setTimeout 一样，除了前两个参数，setInterval 方法还可以接受更多的参数，它们会传入回调函数。
下面是一个通过 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 的一个常见用途是实现轮询。下面是一个轮询 URL 的 Hash 值是否发生变化的例子。
var hash = window.location.hash;
var hashWatcher = setInterval(function() {
  if (window.location.hash != hash) {
    updatePage();
  }
}, 1000);
setInterval 指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval 指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后 95 毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要 105 毫秒，那么它结束后，下一次执行就会立即开始。
为了确保两次执行之间有固定的间隔，可以不用 setInterval，而是每次执行结束后，使用 setTimeout 指定下一次执行的具体时间。
var i = 1;
var timer = setTimeout(function f() {
// …
timer = setTimeout(f, 2000);
}, 2000);
上面代码可以确保，下一次执行总是在本次执行结束之后的 2000 毫秒开始。
clearTimeout()，clearInterval()
setTimeout 和 setInterval 函数，都返回一个整数值，表示计数器编号。将该整数传入 clearTimeout 和 clearInterval 函数，就可以取消对应的定时器。
var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);

clearTimeout(id1);
clearInterval(id2);
上面代码中，回调函数 f 不会再执行了，因为两个定时器都被取消了。
setTimeout 和 setInterval 返回的整数值是连续的，也就是说，第二个 setTimeout 方法返回的整数值，将比第一个的整数值大 1。
function f() {}
setTimeout(f, 1000) // 10
setTimeout(f, 1000) // 11
setTimeout(f, 1000) // 12
上面代码中，连续调用三次 setTimeout，返回值都比上一次大了 1。
利用这一点，可以写一个函数，取消当前所有的 setTimeout 定时器。
(function() {
// 每轮事件循环检查一次
var gid = setInterval(clearAllTimeouts, 0);

sleep(3000);

var input = document.getElementById(‘myButton’);

input.onclick = function A() {
setTimeout(function B() {
input.value +=’ input’;
}, 0)
};

document.body.onclick = function C() {
input.value += ‘ body’
};
上面代码在点击按钮后，先触发回调函数 A，然后触发函数 C。函数 A 中，setTimeout 将函数 B 推迟到下一轮事件循环执行，这样就起到了，先触发父元素的回调函数 C 的目的了。
另一个应用是，用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress 事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的的。
// HTML 代码如下
// <input type=”text” id=”input-box”>

// 写法一
for (var i = 0xA00000; i < 0xFFFFFF; i++) {
div.style.backgroundColor = ‘#’ + i.toString(16);
}

// 写法二
var timer;
var i=0x100000;

function func() {
timer = setTimeout(func, 0);
div.style.backgroundColor = ‘#’ + i.toString(16);
if (i++ == 0xFFFFFF) clearTimeout(timer);
}

timer = setTimeout(func, 0);
上面代码有两种写法，都是改变一个网页元素的背景色。写法一会造成浏览器“堵塞”，因为 JavaScript 执行速度远高于 DOM，会造成大量 DOM 操作“堆积”，而写法二就不会，这就是 setTimeout(f, 0) 的好处。
另一个使用这种技巧的例子是代码高亮的处理。如果代码块很大，一次性处理，可能会对性能造成很大的压力，那么将其分成一个个小块，一次处理一块，比如写成 setTimeout(highlightNext, 50) 的样子，性能压力就会减轻。