Убить все запущенные функции 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, существует вероятность, что innerHTML в f1 будет запущен после , что в f2, и вывод будет 1st function вместо 2nd function.

Что я хочу, так это реализовать в начале каждой функции оператор, который убивает / игнорирует / обходит все функции, которые выполняются в данный момент, так что конечный вывод всегда будет связан с последней кнопкой, нажатой пользователем. Как это может быть лучше всего реализовано?

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>

Answer 2

Используйте логическое значение, чтобы остановить выполнение функции, если она была нажата один раз ранее.

var pause = false;
var result = document.getElementById("result");

function genericF(text) {
    if(pause) return;
    pause = true;
    // Kill other running instances of all functions
    setTimeout(() => {
        result.innerHTML = text;
        pause = false;
    }, 10000 * Math.random());
}

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