之前使用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)
}`
