обзор сайта

Каждый раз, когда заградительный огонь запускается, таймер будет генерироваться с помощью setInterval, и новый заградительный огонь будет генерироваться каждые 2 секунды, и он будет продолжать зацикливаться. Когда страницу нужно переключить и страницу нужно закрыть, используйте clearInterval, чтобы сбросить таймер и сбросить сгенерированный шквал.Короткий код выглядит следующим образом:

let barrageTimer = null;
// 循环生成弹幕，每次调用生成一条弹幕
function barrageStart() {
  barrageTimer = setInterval(()=>{
    createBarrage();
  },2000);
} 

// 关闭弹幕，并清理已生成的弹幕
function barrageEnd() {
  clearInterval(barrageTimer);
  barrageList = [];  
}

// 小程序页面每次载入时调用
onShow() {
  barrageStart();
}
// 小程序页面隐藏或切换后台时调用
onHide() {
  barrageEnd();
}

Когда я закончил писать этот код, я был полон уверенности и чувствовал, что он будет работать без проблем, а результат... Таймер заграждения на странице все еще работает, и на него никак не влияет clearInterval... Это, можно сказать, очень раздражает, но все равно продолжаю улыбаться...

краткое изложение проблемы

ЗапросMDNПосле этого становится ясно, что setInterval на самом деле будет возвращать идентификатор таймера после его выполнения, и его идентификатор будет возвращаться каждый раз, когда генерируется таймер, что эквивалентно таймеру, сгенерированному каждый раз при входе на страницу. , возможно, clearInterval не очистил таймер, сгенерированный этой страницей, и barrageTimer перезаписывается новым идентификатором таймера, в результате чего таймер работает всегда. Также очень просто решить эту проблему.Перед созданием нового таймера проверьте, пока есть старый идентификатор таймера, остановите его снова, чтобы идентификаторы таймеров не перекрывали друг друга.

function barrageStart() {
  if (barrageTimer) {
    clearInterval(barrageTimer);
  }
  barrageTimer = setInterval(()=>{
    createBarrage();
  },2000);
} 

function barrageEnd() {
  clearInterval(barrageTimer);
  barrageTimer = 0;
  barrageList = [];  
}

Конечно, этого недостаточно, лучше всего использовать массив, чтобы хранить id таймера прямо в нем, и равномерно очищать его, когда это необходимо.

let barrageTimer = null;
let barrageTimerList = []
function barrageStart() {
  barrageTimer = setInterval(()=>{
    createBarrage();
  },2000);
  barrageTimerList.push(barrageTimer)
} 

function barrageEnd() {
  barrageTimerList.forEach((item,index)=>{
    clearInterval(item)
  })
  barrageTimerList = []
  barrageTimer = 0;
  barrageList = [];  
}