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)

 

 

 

 

 

 

 

上一篇:javascript – setInterval给我TypeError:无法调用undefined的方法’apply’


下一篇:Javascript函数setInterval()只能运行一次