在做demo时很容易不给定时器设置一个变量存储,而是直接用定时器了,如果数据量大的话就会在控制台一直输出,这时候你应该静下心来把定时器清除就是了

假设我们有100,000条消息,根据视频播放的进度展示对应的消息,不展示历史消息。

// 模拟原始消息列表,
const newList = new Array(100).fill(1).map((item, index) => {
  return {
    time: (index + 1) * 1000,       // 消息发送的时间,一秒一个
    content: `这是第${index + 1}s发送的消息` // 消息发送的内容
  }
})

// 发送的消息列表
const sendList = [];
function getMessage(time) {
  let j = 0; // 循环次数
  for(let i = 0, len = newList.length; i < len; i++) {
    const item = newList[i];
    j++;
    // 这里的time如果不是1000、2000,而是1234、1214这种,就需要取一个浮动范围
    // 我这里就是简单用了定时器,所以比较简单
    if(item.time === time) {
      sendList.push(newList[i])
      newList.splice(i, 1)
      i--;
    } else if(sendList.length > 0) {
        break;
    }
  }
  console.log('播放进度', time)
  console.log('循环的次数', j);
  console.log('接收的消息的长度', sendList.length, sendList);
  console.log('原始消息的长度', newList.length);
  
}

let time = 0;
// 定时器,1s触发一次
let timers = setInterval(() => {
  time += 1000;
  getMessage(time);
}, 1000)

解决办法:直接暴力清除定时器

for (let i = 0; i < 100000; i++) {
    clearInterval(i)
}

一:clearTimeout(timeId)

取消由 setTimeout() 方法设置的 timeId。

clearTimeout(id_of_settimeout)
//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
  
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
   //your codes
},1000)
  
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);

二:clearInterval(timeId)

取消由 setInterval() 设置的 timeId。

clearInterval(id_of_setinterval)
//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
  
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
   //your codes
},1000)
   
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐