欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

setTimeout()和setInterval()的执行逻辑和区别:

程序员文章站 2022-03-27 21:59:37
逻辑理解:当程序执行setTimeout()和setInterval()时,会让这两者到后台(我的理解,事实是否如此,有待验证)运行计时,当时间到了之后,将回调函数按照顺序依次排在当前正在执行的函数队列尾部。哪怕延迟为0也一样,当前正在执行解析的Javascript解析器并不会立即执行定时器的回调函 ......
逻辑理解:当程序执行setTimeout()和setInterval()时,会让这两者到后台(我的理解,事实是否如此,有待验证)运行计时,当时间到了之后,将回调函数按照顺序依次排在当前正在执行的函数队列尾部。哪怕延迟为0也一样,当前正在执行解析的Javascript解析器并不会立即执行定时器的回调函数(定时器相当于异步,但有区别),还是会将它们的回调函数排在当前解析队列的尾部(或者可以理解为放在下一轮函数队列的头部)。
 
区别理解:setTImeout()中的回调函数开始执行的延迟时间 >= delay,综上所述,因为在delay过程中有时会有其他函数在执行,如果那些函数执行的时间大于delay的时间,就会导致setTImeout()中的回调函数“延期执行”。
setInterval()中的回调函数执行之间的间隔<= delay:我们都知道,setInterval()会按照固定的时间间隔调用自身的回调函数,且不会在意上一次的回调函数是否执行完毕,这就意味着,如果上一次回调函数前面有等待执行的函数,它们总体执行的时间>delay的时间且当前将要执行的回调函数与上一次的回调函数之间没有其他等待执行的函数,就会导致一种情况:setTImeout()中的回调函数会连续执行两次。
如:
setTimeout(function() { // 此回调函数每次执行的间隔时间 >= 100
/*
一堆函数体
*/
setTimeout(arguments.callee, 100)
}, 100)
 
setInterval(function () { // 此回调函数每次执行的间隔时间 <= 100
/*
一堆函数体
*/
}, 100)