重置循环 setTimeout()

Question

我可以使用 setTimeout() 每隔几秒向我的 table 添加一行。但是当我尝试重置 table 并再次填充它时，上次的一些行仍然出现。我想重置整个 table 并从 0 开始。

这是我的代码：

$(document).ready(() => {
  $('#btn-start').click(() => {
      showMoves();
  });
  $('#btn-reset').click(() => {
      $('#table-moves tbody tr').remove();
      clearTimeout(timer);
  });
});

var timer;

function showMoves () {
  const moves = ['nf3','d5','g3', 'g6'] // ...
  $('#table-moves tbody tr').remove();
  for (let i = 0; i < moves.length; i++) {
    timer = setTimeout(() => {
        $('#tbody-moves').append(`<tr><td>${i + 1}</td><td>${moves[i]}</td></tr>`);        
    }, 2000 * i);
    if (i >= moves.length - 1) {
      clearTimeout(timer);
    }
  }
}

Output

Answer 1

setTimeout 是一个异步函数，因此当您遍历 moves 时，您会创建 N 个计时器。所以要重置它们，你需要存储它们

$(document).ready(() => {
  $('#btn-start').click(() => {
      showMoves();
  });
  $('#btn-reset').click(() => {
      $('#table-moves tbody tr').remove();
      while(timers.length) clearTimeout(timers.shift()) // Added
  });
});

var timers = []; // Change

function showMoves () {
  const moves = ['nf3','d5','g3', 'g6'] // ...
  $('#table-moves tbody tr').remove();
  for (let i = 0; i < moves.length; i++) {
    /*Change*/timers.push(setTimeout(() => {
        $('#tbody-moves').append(`<tr><td>${i + 1}</td><td>${moves[i]}</td></tr>`);        
    }, 2000 * i));
    if (i >= moves.length - 1) {
      clearTimeout(timers.pop()); // Change
    }
  }
}```

重置循环 setTimeout()

Reset looping setTimeout()

javascript

settimeout