关于setInterval的坑

一道面试题：
“setInterval和setTimeout有什么区别”

“如果setInterval计时器的回调函数执行完需要5秒，而计时器时间间隔为3秒，那会发生什么？”

验证代码

让程序滞留固定时间的方法如下：

?

1 2 3 4

function sleep(time) {   let startTime = window.performance.now();   while (window.performance.now() - startTime < time) {} }

运行代码如下：

?

1 2 3 4 5 6 7 8 9 10

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,改一下

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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，结果也一样

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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()会严格按照间隔时间执行。

链接：https://www.jianshu.com/p/0ad05e325f9b