Question

我想知道如何停止已经启动的setTimeout（）？在下面的示例中，我有两个按钮：.start和.cancel。按.start将调用定时器，该定时器将在2秒后执行console.log()。我试图获得单击.cancel将停止计时器执行并清除其队列的行为。这可能吗？

我遇到的问题是，如果我点击.start，然后在2秒之前立即点击.cancel，我仍然会在控制台中看到btn clicked。我不想看到那个控制台消息。

var timer;

$('.start').on('mousedown', function() {
  timer = setTimeout(function() {
    console.log('btn clicked');
  }, 2000);
});

$('.cancel').on('mousedown', function() {
  clearTimeout(timer);
});

https://jsfiddle.net/xL8yquoL/

Answer 1

您的代码取消了一个计时器，但您可以通过点击＆＃34; start＆＃34;来创建多个计时器。很多次。

如果您需要取消多个计时器，您可以保留一组计时器参考。

在此示例中，每次.cancel点击都会清除创建的 last 计时器，因为array.pop会移除并返回array中的最后一项。

var timers = [];

$('.start').on('mousedown', function() {
  timers.push(setTimeout(function() {
    console.log('btn clicked');
  }, 2000));
});

$('.cancel').on('mousedown', function() {
  clearTimeout(timers.pop());
});

https://jsfiddle.net/xL8yquoL/1/

如果您需要一键清除每个计时器：

$('.cancel').on('mousedown', function() {
  timers.forEach(clearTimeout)

  timers = [];
});

如何停止已经被解雇的setTimeout（）

1 个答案: