setInterval调用被废弃或者setInterval的无间隔连续调用

JS定时器深入解析

最新推荐文章于 2024-12-07 08:19:51 发布

转载最新推荐文章于 2024-12-07 08:19:51 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b3510aff265da59645b18ad

文章标签：

#javascript #ViewUI

本文深入探讨了JavaScript中定时器setInterval的工作原理及其在单线程环境中的行为表现。通过具体示例说明了当定时器处理时间超过设定间隔时可能产生的问题，并提供了关于如何在前端框架如Vue和React中正确使用定时器的建议。

setInterval调用被废弃和无间隔重连续调用，都是js的单线程引起的。

1.首先来讲setInterval调用被废弃的原因。

js是单线程，因此只能在执行完同步script之后才能执行异步的事件回调，例如promise、ajax、setInterval、setTimeout等等。主线程在执行同步代码的时候，有事件触发了，此事件的回调函数必须进入执行栈等待执行，而进入执行栈的函数的执行遵循：
1.先进先出原则。
2.浏览器不会对同一个setInterval处理程序多次添加到待执行队列。假如有以下代码：

let a = 1;
let time1 = new Date();
for(let i = 0; i< 1000000000 ; i ++){//执行此循环大概需1.3s
    a = 1;
}
setTimeout(() => {
    let time2 = new Date();
    let time3 = time2 - time1;
    console.log('我是setTimeout', time3 );//2340
    for(let i = 0; i< 1000000000 ; i ++){//执行此循环大概需2s
        a = 1;
    }
}, 1000);
setInterval(() => {
  let time4 = new Date();
  let time5 = time4 - time1;
  console.log("I'm  setInterval,", time5);//4540
  for(let i = 0; i< 1000000000 ; i ++){//执行此循环大概需2s
      a = 1;
  }
}, 1000)
复制代码