如何在 JavaScript 中中断和停止正在运行的函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17007482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I interrupt and stop a running function in JavaScript?
提问by CookieMonster
I have several buttons and each calculates some numbers and displays it on screen. Different buttons take differnet amount of time to finish calculation. In my current implementation, if I click on a button and then click on a different button before the first one finishes, the result from the second button is displayed only after the first one finishes. How can I modify this that as soon as I click the second button, it stops the calculation initiated by the first button and continues with its calculation?
我有几个按钮，每个按钮计算一些数字并将其显示在屏幕上。不同的按钮需要不同的时间来完成计算。在我当前的实现中，如果我单击一个按钮，然后在第一个按钮完成之前单击另一个按钮，则仅在第一个按钮完成后才会显示第二个按钮的结果。我如何修改它，一旦我单击第二个按钮，它就会停止由第一个按钮启动的计算并继续其计算？
HTML
HTML
<input type="button" value="One" onclick="displayNumber(1)">
<input type="button" value="Two" onclick="displayNumber(2)">
....
JavaScript
JavaScript
function displayNumber(id) {
alert(calculateAwesomeNumber(id));
}
This may be not possbile in JavaScript as it is single-threaded and only one function can be running at any time. Am I correct?
这在 JavaScript 中可能是不可能的，因为它是单线程的，并且任何时候都只能运行一个函数。我对么？
回答by
You can use WebWorkers.
您可以使用WebWorkers。
This will work in a separate thread and allow you to do heavy calculations without intefering with the UI thread.
这将在单独的线程中工作，并允许您在不干扰 UI 线程的情况下进行大量计算。
You can signal the worker to stop.
您可以示意工人停止。
See here for examples on how to use:
http://www.html5rocks.com/en/tutorials/workers/basics/
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
有关如何使用的示例，请参见此处：
http: //www.html5rocks.com/en/tutorials/workers/basics/
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
If WebWorkers isn't an option you can use a flag to force the function to stop:
如果 WebWorkers 不是一个选项，您可以使用一个标志来强制该函数停止：
var _stop;
function displayNumber(num) {
_stop = false;
while(!_stop) {
//calc
}
}
And then on button2 click:
然后在 button2 上单击：
<input type="button" value="Two" onclick="_stop=true;displayNumber(2)">
Instead of a loop you can check _stopafter each segment of the calculation is done.
您可以_stop在计算的每个部分完成后检查，而不是循环。
Just note that if the calculation is long and busy you might not get a response of the button until it finishes. You can use setTimout(..., 0)from time to time inside the calculation to allow other events to execute.
请注意，如果计算很长且很忙，您可能在完成之前不会收到按钮的响应。您可以setTimout(..., 0)不时地在计算内部使用以允许其他事件执行。
How you implement this will depend on the code you use for calculation.
您如何实现这将取决于您用于计算的代码。
You can break up the calculation for example like this:
您可以像这样分解计算：
function displayNumber(num) {
var forCalculation;
function step1() {
//calc step 1 you have access to forCalculation and num vars here
if (_stop) return;
setTimeout(step2, 0);
}
function step2() {
//calc step 2 you have access to forCalculation and num vars here
if (_stop) return;
setTimeout(step3, 0);
}
function step3() {
//calc step 3 you have access to forCalculation and num vars here
if (_stop) return;
}
step1();
}
