这两个应该大家都认识,我也就不多解释了。今天发现了一个很经典的例子,看下
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)