Stop Javascript Function execution from another Function

You can pass an argument, like cancel, whenever you are calling the MainFunction. So, if you want the function to start, you pass in an arguement '0', and if you want it to stop, you can call the function again with an arguement which is not '0', like '1'. Here is a working example:

function MainFunction(cancel) {
var yourcode;
  if (cancel == 0) {
    yourCode = setInterval(function() {
      //Put your code here, this is an example:
      document.getElementById('div').style.color = "red";
    }, 1);
  }
  if (cancel == 1) {
    clearInterval(yourCode);
    document.getElementById('div').style.color = "black";
  }
}
<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <button id="btn" onclick="MainFunction(0)">Start</button>
    <button onclick="MainFunction(1)">Stop</button>
    <div id="div">This division can change colour</div>
  </body>
</html>

JavaScript is normally single threaded - meaning that while a function is executed in the browser no other code can run at the same time - including event handlers such as onclick (they will be triggered only after the function is complete). So, in this case you cannot interrupt the execution of a function from code.

There are two workounds:

  1. The long running function could take breaks intentionally, allowing other code to execute.

    //set this to true from an event handler to stop the execution
var cancelled = false;

function longRunningFunction() {
  if (cancelled) {
    return;
  } 

  // do some work, but not all
  // save your progress to be able to resume when called again

  if (!done) {
    // release control, so that handlers can be called, and continue in 10ms
    setTimeout(longRunningFunction, 10);
  }
}

  2. Use web workers. They allow running code in parallel, but have some restrictions and are not supported by all browsers.

Tags:

Javascript

Function

Dom Events

Recent Posts