之前使用setInterval进行一个前端轮询的操作，结果把网站卡崩了，来总结一下setInterval和setTimeout的坑

---

一.setInterval的坑

• setInterval会无视代码错误。
  就算代码中遇到了错误，它还是会一直循环下去，如果代码中有错误代码，setInterval就会导致这个错误被隐藏

  let count = 1;
  setInterval(function () {
      count++;
      console.log(count);
      if (count % 3 === 0) throw new Error('setInterval报错');
  }, 1000)

• setInterval会无视任何情况定时执行
  这就是我遇到的哪个BUG，由于数据量很庞大，服务器的响应时间很长，就造成了前一个请求还没有完成，下一次请求又发起了，就会造成非常严重的卡顿。此时就应该使用setTimeout，当用户发出去的请求得到响应或者超时后，再使用setTimeout递归发送下一个请求，这样就不会出现ajax请求堆积的问题了。
• setInterval并不能确保每次调用都能执行

  const startDate = new Date();
  let endData;
  // 第一个调用会被略过
  setInterval(() => {
    console.log('start');
    console.log(startDate.getTime());
    console.log(endDate.getTime());
    console.log('end');
  }, 1000);
  while (startDate.getTime() + 2 * 1000 > (new Date()).getTime()) {
  }
  endDate = new Date();

我们可以看到，第一次执行的setInterval函数输出的startDate和endDate差距在2s以上。而我们的setInterval写的是每间隔1s执行一次。因此，我们可以看出，第一次的setInterval函数调用被略过了。

这说明了：如果说你的代码执行时间会比较久的话，就会导致setInterval中的一部分函数调用被略过。因此你的程序如果依赖于setInterval的精确执行的话，那么你就要小心这一点了。

当然，其实setTimeout也有这个问题。浏览器的定时器都不是精确执行的。就算你调用setTimeout(fn, 0)，它也不能确保马上执行。

解决方法：

function fn () {
  setTimeout(() => {
    // 程序主逻辑代码
    // 循环递归调用
    fn();
  }, 1000);
}
fn();

• setInterval不会清除定时器列表
  每一次重复执行setInterval的回调函数都会导致计时器类加，造成内存的泄漏，最终导致网页的卡顿
• 解决方法：*

  window.setInterval(() => {
    setTimeout(fun, 0)
  }, 30000)

  setTimeout是自带清除定时器的。
• vue 项目的时候，如果页面使用到循环定时器，调用后台接口出现异常，在切换路由地时候并不能清除定时器。

  beforeRouteLeave(to, from, next) {
  console.log('beforeRouteLeave')
  this.clearTimer()
  next() //一定不要忘记写
  }

• setInterval有时会越跑越快
  推荐使用setTimeout和递归结合代替

var demo = function(){
console.log('做点什么吧')
setTimeout(demo, 1000)       
}`