定时器

原文地址：https://wangdoc.com/javascript/
JavaScript提供定时执行功能，叫做定时器，主要由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

如果推迟执行的是函数，就直接将函数名，作为setTimeout参数。

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

setTimeout(f, 1000);

setTimeout第二个参数如果省略，则默认为0。
除了前两个参数，setTimeout还允许更多的参数。它们将依次传入推迟的函数（回调函数）。

setTimeout(function (a, b) {
    console.log(a + b);
}, 1000, 1, 1);

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那么对象。

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

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

为了防止出现这个问题，一种解决方法是将obj.y放入一个函数。

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

另一种解决方法是使用bind方法，将obj.y这个方法绑定在obj上。

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

setTimeout(obj.y.bind(obj), 1000);

setInterval()

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

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

setInterval的一个常见的用途是实现轮询。下面是一个轮询的URL的Hash值是否发生变化的例子。

var hash = window.location.hash;
var hashWatcher = setInterval(function () {
    if (window.location.hash != hash) {
        updatePage();
    }
}, 1000);

setInterval指定的是开始执行之间的时间间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的时间间隔会小于指定的时间。比如，setInterval指定每100ms执行一次，每执行一次需要5ms，那么第一次执行结束后95ms，第二次执行就会开始。如果执行事件超出时间间隔，那么一次执行结束立即开始下次执行。
为了确保两次执行之间有固定的间隔，可以不使用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
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--;
        }
    }
})();

实例debounce函数

有时，我们不希望回调函数被频繁调用。比如，用户填入网页输入框的内容，希望通过Ajax方法传回服务器，jQuery的写法如下。

$(".textarea").on("keydown", ajaxAction);

这样写有一个很大的缺点，就是用户连续点击，就会连续触发keydown事件，造成大量的Ajax通信。这是不必要的，而且很有可能产生性能问题。正确的做法应该是，设置一个门槛值，表示两次Ajax通信的最小间隔时间。如果在间隔时间内，发生新的keydown事件，再将数据发送出去。
这种做法叫做debounce（防抖动）。假定两次Ajax通信的间隔不得小于2500ms，上面代码写成下面这样。

$("textarea").on("keydown", debounce(ajaxAction, 2500));

function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}

上面代码中，只要在2500毫秒内，用户再次击键，就会取消上一次的定时器，然后再建一个定时器。这样就保证了回调函数之间的调用间隔，至少2500毫秒。

运行机制

setTimeout和setInterval的运行机制，是将指定的代码移出本轮事件循环，等到下一轮循环再检查是否到了指定时间。如果到了，就执行指定的代码；如果不到，就继续等待。
这意味着，setTimeout和setInterval指定的回调函数，必须等到本轮事件循环的所有同步任务都执行完，才会开始执行。由于前一个任务什么时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预订时间执行。

setTimeout(someTask, 100);
veryLongTask();

上面代码的setTimeout，指定100ms以后运行某个任务。但是，如果后面的veryLongTask运行时间非常长，只有等待veryLongTask运行结束，才轮到它执行。

setTimeout(f, 0)

含义

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)会立即执行吗？
答案是不会。因为上一节说过，必须要等到当前脚本的同步任务全部处理完以后，才会执行setTimeout指定的回调函数f。也就是说，setTimeout(f, 0)会在下一轮事件循环开始就执行。
总之，setTimeout(f, 0)这种写法的目的是，尽可能早地执行f，但是并不能保证立刻就执行f。
实际上，setTimeout(f, 0)不会真的在0毫秒之后运行，不同的浏览器有不同的实现。以Edge浏览器为例，会等到4毫秒之后运行，如果电脑正在使用电池供电，会等到16毫秒之后运行；如果网页不在当前Tab，会推迟到1000ms后运行。这样为了节省系统资源。

应用

setTimeout(f, 0)有几个非常重要的用途。它的一大应用是，可以调整事件发生的顺序。比如，网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果想让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)。

var input = document.getElementById("myButton");
input.onclick = function A() {
    setTimeout(function B() {
        input.value += " input";
    }, 0);
};
document.body,onclick = function C() {
    input.value += " body";
};

另一个应用是，用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如用户在输入框输入文本，keypress事件会在浏览器接收文本之前出发。因此，下面的回调函数达不到目的。

document.getElementById("input-box").onkeypress = function (event) {
    this.value = this.value.toUpperCase();
};

因为浏览器先响应了用户的时间，即onkeypress事件，再进行默认动作（显示用户输入）。
上面代码想在用户每次输入文本以后，立即将字符转为大写。但实际上，它只能将本次输入前的字符转为大写，因为浏览器此时还没接收到新的文本，所以this.value取不到最新输入的那个字符。只有用setTimeout改写，上面的代码才能发挥作用。

document.getElementById("input-box").onkeypress = function () {
    var self = this;
    setTimeout(function () {
        self.value = self.value.toUpperCase();
    }, 0);
};

由于setTimeout(f, 0)实际上意味着，将任务放到浏览器最早可得的空闲时段执行，所以那些计算量大，耗时长的任务，常常被放到几个小部分，分别放到setTimeout(f, 0)里面执行。

var div = document.getElementByTagName("div")[0];
// 写法一
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(highlightNext, 50)的样子，性能压力就会减轻。