Kill all running JavaScript functions with Timeouts on click

Question

I have a webpage with 3 buttons and a "result" section:

<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>

Here are the snippets for the JavaScript functions:

var to;

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

f2 and f3 are basically the same, but prints different outputs after the less-than-10-second pause.

However, if the user clicks b1 and then immediately click b2, there is a possibility that the innerHTML within f1 gets run after that in f2, and the output would be 1st function, instead of 2nd function.

What I want is to implement, at the start of each function, a statement that kills/ignores/bypasses all functions that are currently running so that the final output would always be the one associated with the last button the user pressed. How can it be best implemented?

Mark · Accepted Answer · 2018-05-02 23:19:29Z

1

You can set a global variable that all the functions can see and use it to store the return value from setTimeout(). You are already doing this. All you need to do now is call clearTimeout() at the head of each function to prevent the previous call from executing.

The effect will be that the last button to be pressed will be the only one that wins.

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>

answered May 2, 2018 at 23:19

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mushinako Over a year ago

Working elegantly!

kemicofa · Accepted Answer · 2018-05-02 23:00:44Z

1

Use a boolean to stop the function from running, if it has been pressed once before.

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>

answered May 2, 2018 at 23:00

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

2 Comments

Mark Over a year ago

The final output will always be the first button pressed, not the last.

Mushinako Over a year ago

I believe that this blocks further inputs until the first function finishes. What I would like to see is the early termination of the first function and immediate start of the second function.

Collectives™ on Stack Overflow

Kill all running JavaScript functions with Timeouts on click

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related