Is there any way to stop the execution of a called function from another function?
I have following code:-
function MainFunction() { //a long code that runs for few time };
MainFuntion();
<button onclick="(Here I want some thing to stop MainFunction())">Stop the running script </button>
so basic idea is to return a function from another function
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:
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);
}
}
Use web workers. They allow running code in parallel, but have some restrictions and are not supported by all browsers.
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>I think you are trying to stop the execution of other function call from a function. if yes then you need to put the called function inside the condition so that you can control the execution.
if my understanding is not correct please elaborate what you want to do , mens why want to stop the execution of the function.
