如何延迟停止循环以继续另一个

Question

我试图让两件事同时发生，但只允许其中一件。如果某些事情已经发生，我需要能够完全阻止它并让另一个接管。这是我的例子：

https://jsfiddle.net/mortenmoulder/5eceLvgu/

function log(text, interval, amount) {
    (function myLoop(i) {
        timer = setTimeout(function() {
            console.log(text);
            if (--i) myLoop(i);
        }, interval)
    })(amount);
}

$("#first").on("click", () => log("first", 500, 10));
$("#second").on("click", () => log("second", 500, 10));

单击第一个按钮，它将console.log("first") 10 次，延迟 500 毫秒。当您单击第二个按钮时，它应该取消第一个并启动console.log("second") 而不会被中断（除非您单击第一个按钮）。

我该怎么做？我需要延迟循环，并且我需要一个函数来执行此操作（因此每个按钮都没有很多 if 语句，因为有很多按钮）。

Answer 1

如果你调用log，你需要存储定时器id并清除它：

var logTimer;

function log(text, interval, amount) {
  clearTimeout(logTimer);
  (function myLoop(i) {
    logTimer = setTimeout(function() {
      console.log(text);
      if (--i) myLoop(i);
    }, interval)
  })(amount);
}

Answer 2

您已经在存储计时器，因此您可以清除它的超时时间。

https://jsfiddle.net/5eceLvgu/1/

var timer;
function log(...)
    clearTimeout(timer);
    (function myLoop(i) {