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

499 阅读1分钟

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)

setInterval的处理时长不能比设定的间隔长,否则setInterval将会没有间隔的重复执行。

注:一般的话,路由跳转无法销毁setInterval和setTimeout等全局方法(因为它们属于window的方法),所以在使用vue和react native、react等框架时,路由的跳转之前,要清空定时器。

明天写。。。。困了,先睡了

本文的参考文章是OBKoro1大大的文章--JS忍者秘籍中的定时器机制详解