js中setInterval和setTimeout

这两个应该大家都认识，我也就不多解释了。今天发现了一个很经典的例子，看下

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

先说下这个不是问你的打印的是什么，是5个5没错，但是是每隔1秒输出一个5 ？还是一秒后立即输出5个5？

 

 

 

答案：一秒后立即输出5个5

setTimeout执行时：定时触发器线程、事件触发线程、JS引擎线程在干什么？
每个setTimeout都由定时触发器线程负责计时，计时完毕后，添加到事件队列中(即：事件触发线程)，等待JS引擎线程空闲后，再来依次执行。

为什么一秒后立即输出5个5？
首先JS引擎线程 要运行for循环，在每次循环中都会调用一个setTimeout函数，每个setTimeout计时结束后都会将其回调函数添加到 事件队列 中。等for循环结束后（即JS引擎线程空闲后），才开始按顺序执行事件队列中的函数。
每次循环都会在一秒后将回调函数添加到事件队列中，但由于两次相邻的循环时间是短到可以忽略不计的，所以表面看上去 一秒后立即执行了5次回调函数，即一秒后立即输出5个5。

 

setInterval有两个缺点：

• 使用setInterval时，某些间隔会被跳过；
• 可能多个定时器会连续执行；

• 在前一个定时器执行完前，不会向队列插入新的定时器
• 保证定时器间隔

setInterval(function, N) //即：每隔N秒把function事件推到消息队列中  并不能保障每隔N秒执行一次，所以这时候我们需要用setTimeout模拟setInterval来保障确定的函数间隔时间。setTimeout模拟setInterval，也可理解为链式的setTimeout。

用法：

setTimeout(function () {
    // 任务
    setTimeout(arguments.callee, interval);
}, interval)