【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)

超时调用(setTimeout)：在指定的毫秒数后调用函数或计算表达式。

setTimeout(func, 1000);    // func执行的函数，1000毫秒

间歇调用(setInterval)：按照指定的周期（以毫秒计）来调用函数或计算表达式

setInterval(func, 1000);

用法很简单，但是不一定好用

首先回到JavaScript本身

JavaScript是一个单线程语言，它有一个任务队列，队列里的任务按顺序执行。

打个比方，我们点击一个按钮触发一个事件，此时该事件会被添加到任务队列里边，如果当前队列是空的，那么立即执行该事件；如果不是空的，那么等前面的任务执行完了以后再执行该事件。也就是说，JS里边的代码都不是立即执行的。

其实，超时调用并不是在特定的时间之后执行代码，而是在特定的时间之后将代码添加到任务队列。间歇调用也一样，每间隔特定时间就将代码添加到任务队列。

举个例子：

btn.onclick = function () {
setTimeout(延时代码, 200);
// 处理代码
}

点击之后过200毫秒，延时代码进入任务队列，在这之前处理代码已经进入任务队列。

假设原任务队列是空的，且处理代码的执行事件是300毫秒，那么延时代码在点击之后过300毫秒才会执行。

间歇调用也是这个道理。因此，如果每一次的代码执行事件过长，就会出现间隔事件小于我们设置的时间的情况。平时我们没遇到这种情况，是因为代码执行时间没那么长，或者出现了这种情况，但是肉眼看不出来。

这里有一个避免setInterval()出问题的方法，那就是链式地调用setTimeout()：

var interval = 200;
setTimeout(function () {
// 处理代码
setTimeout(arguments.callee, interval);
}, interval)

这样每一个函数执行时，都会创建新的定时器。arguments.callee是对当前执行函数的引用。这种情况下，前一次处理代码执行完之后，过特定时间，下一次的处理代码才会进入任务队列。

 

欢迎补充或指正