Question

这是我一直在测试的一段代码，用于检查是否可以使用setTimeout和clearTimeout停止for循环。 for循环保持运行。

var ticket, key;
$(document).on("keydown", function(e){
      if (e.key == "m") ticket = setTimeout(runMe,0); 
      if (e.key == "a") {clearTimeout(ticket); key = "a";}
})

function runMe(){
for (var i=0; i < 1000000; i++){
if (key == "a") break;   // doesn't work
myFunct(i); 
}
}

function myFunct(i){
console.log(i);
}

var ticket, key, i=0;
$(document).on("keydown", function(e){
      if (e.key == "m") ticket = setInterval(runMe,0,i++); 
      if (e.key == "a") {clearInterval(ticket); key = "a";}
})

function runMe(i){
console.log(i);
//myFunct(i); 

}

function myFunct(i){
console.log(i);
}

Answer 1

也许您可以使用webworker来运行for循环代码，然后使用terminate()来暂停循环。

// forloop.js
for (var i=0; i < 1000000; i++){
  myFunct(i); 
}

function myFunct(i){
  console.log(i);
}

// index.js
var myWorker;
$(document).on("keydown", function(e){
  if (e.key == "m") myWorker = new Worker('forloop.js'); 
  if (e.key == "a") {myWorker.terminate();}
})

注意：代码未经过测试，只是为了给您一个粗略的想法

Answer 2

您无法使用异步代码停止同步代码，因为在您返回主事件循环之前不会执行异步代码。

如果您想重复运行某些内容，请使用setInterval，然后在事件发生时将其清除。

＆＃13;

var counter = 0;
var interval;

function runMe() {
  if (counter == 1000) {
    clearInterval(interval);
  } else {
    counter++;
    $("#output").text(counter);
  }
}

$(document).on("keydown", function(e) {
  if (e.key == 'm') {
    interval = setInterval(runMe, 10);
  } else if (e.key == 'a') {
    clearInterval(interval);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

＆＃13;

Answer 3

JavaScript是单线程的，因此在runMe()函数运行直到完成之后，您的密钥处理程序才会运行。

您可以使用setTimeout()（或setInterval()）构建异步循环函数，以便其他代码（如键处理程序）有机会在“循环”的迭代之间运行。

我建议将循环处理代码封装在runMe()函数中，让runMe()返回一个可以调用以停止当前循环的函数。这样你就可以轻松地同时拥有多个不相关的循环并单独停止它们 - 你需要跟踪每个循环 - 我没有在下面的代码中显示它，但它并不比我拥有的多得多所示。（如果你使循环计数器成为一个全局变量，那么显然你不能有单独的并发循环。）

var stopLoop;

$(document).on("keydown", function(e){
  if (e.key == "m") stopLoop = runMe(); 
  if (e.key == "a") stopLoop();
});

function runMe(){
  var i=0;
  var last=300; // I've used a smaller number so that you don't have to
                // wait too long to see see that it stops by itself if
                // you don't press "a" in the meantime
  var stop = false;
  
  (function looper() {
    myFunct(i);
    if (++i < last && !stop)
      setTimeout(looper, 5);
  })();
  
  return function() { stop = true; }
}
  
function myFunct(i){
  console.log(i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如何在JavaScript中使用Hotkey停止for循环

3 个答案: