关于setInterval的坑
一道面试题:
“setInterval和setTimeout有什么区别”
“如果setInterval计时器的回调函数执行完需要5秒,而计时器时间间隔为3秒,那会发生什么?”
验证代码
让程序滞留固定时间的方法如下:
function sleep(time) { let startTime = window.performance.now(); while (window.performance.now() - startTime < time) {} }
运行代码如下:
let count = 1; let getTime = window.performance; let startTime = getTime.now(); setInterval(function () { console.log(`第${count}次开始 ${getTime.now() - startTime}`); // 显示开始时间 sleep(500); // 程序滞留500ms console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间 count += 1; }, 300); // 300ms间隔
为方便测试setTimeout,改一下
function test(){ console.log(`第${count}次开始 ${getTime.now() - startTime}`); // 显示开始时间 sleep(500); // 程序滞留500ms console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间 count += 1; count>10 && clearInterval(t); } let count = 1; let getTime = window.performance; let startTime = getTime.now(); var t = setInterval(test , 300); // 300ms间隔
其他浏览器也一样,但是在NODE中
改为setTimeout,结果也一样
function sleep(time) { let startTime = window.performance.now(); while (window.performance.now() - startTime < time) {} } function test(){ console.log(`第${count}次开始 ${getTime.now() - startTime} ID:${t}`); // 显示开始时间 sleep(500); // 程序滞留500ms console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间 count += 1; count<10 && setTimeout(test,300); } let count = 1; let getTime = window.performance; let startTime = getTime.now(); var t; test(); // 300ms间隔
目前得出的结论:
1. 标准中,setInterval()如果前一次代码没有执行完,则会跳过此次代码的执行。
2. 浏览器中,setInterval()如果前一次代码没有执行完,不会跳过此次代码,而是将其插在队列中,等待前一次代码执行完后立即执行。
3. Node中,setInterval()会严格按照间隔时间执行。
1. 标准中,setInterval()如果前一次代码没有执行完,则会跳过此次代码的执行。
2. 浏览器中,setInterval()如果前一次代码没有执行完,不会跳过此次代码,而是将其插在队列中,等待前一次代码执行完后立即执行。
3. Node中,setInterval()会严格按照间隔时间执行。
链接:https://www.jianshu.com/p/0ad05e325f9b