javascript - 通过点击超时来终止所有正在运行的 JavaScript 函数

Question

我有一个包含 3 个按钮和一个“结果”部分的网页:

<button id="b1" onclick="f1()">1st button</button>
<button id="b2" onclick="f2()">2nd button</button>
<button id="b3" onclick="f3()">3rd button</button>
<p id="result">"Here will be the result!"</p>

以下是 JavaScript 函数的片段:

var to;

function f1() {
    // Kill other running instances of all functions
    to = setTimeout(() => {
        document.getElementById("result").innerHTML = "1st function";
    }, 10000 * Math.random());
}

f2 和 f3 基本相同，但在不到 10 秒的暂停后打印不同的输出。

但是，如果用户单击 b1，然后立即单击 b2，则 f1< 中的 innerHTML 可能会被删除 在 f2 中之后运行，输出将是 第一个函数，而不是第二个函数 .

我想要的是在每个函数的开始处实现一个语句，该语句杀死/忽略/绕过当前正在运行的所有函数，以便最终输出始终是与用户按下的最后一个按钮相关的输出。如何才能最好地实现？

Answer 1

您可以设置一个所有函数都可以看到的全局变量，并使用它来存储 setTimeout() 的返回值。你已经在这样做了。现在您需要做的就是在每个函数的开头调用 clearTimeout() 以防止执行先前的调用。

效果是最后按下的按钮将是唯一获胜的按钮。

var to;

function f1() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "1st function";

  }, 3000 * Math.random());
}

function f2() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "2nd function";

  }, 3000 * Math.random());
}

function f3() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "3rd function";

  }, 3000 * Math.random());
}

<button id="b1" onclick="f1()">1st button</button>
<button id="b2" onclick="f2()">2nd button</button>
<button id="b3" onclick="f3()">3rd button</button>
<p id="result">"Here will be the result!"</p>