呼び出された関数の実行を別の関数から停止する方法はありますか?
私は次のコードを持っています:-
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>
基本的な考え方は、別の関数から関数を返すことです
JavaScriptは通常シングルスレッドです。つまり、関数がブラウザーで実行されている間、onclick
などのイベントハンドラーを含む他のコードは同時に実行できません(関数が完了した後でのみトリガーされます)。したがって、この場合、コードから関数の実行を中断することはできません。
2つのワークラウンドがあります。
長時間実行される関数は意図的に中断する可能性があり、他のコードが実行される可能性があります。
//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);
}
}
web worker を使用します。コードの並列実行が可能ですが、いくつかの制限があり、すべてのブラウザーでサポートされているわけではありません。
MainFunctionを呼び出すときはいつでも、キャンセルなどの引数を渡すことができます。したがって、関数を開始したい場合は、引数「0」を渡し、停止したい場合は、「1」のように「0」ではない引数を指定して関数を再度呼び出すことができます。これが実際の例です:
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>
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>
関数からの他の関数呼び出しの実行を停止しようとしていると思います。はいの場合、実行を制御できるように、呼び出された関数を条件内に配置する必要があります。
私の理解が正しくない場合は、何をしたいのか、なぜ関数の実行を停止したいのかを詳しく説明してください。