Javascript 突然退出循环

让我们想象一下以下代码：

function DoSomethingHard(parameter1, parameter2, parameter3){
  // Do Something Hard Here
}

var i;
for(i = 0; i <= stuff.length; i++) {
  // "stuff" is an array
  DoSomethingHard(stuff[i].something1, stuff[i].something2, stuff[i].something3);
}

$( "#button_to_cancel" ).click(function() {
  //something to cancel
});

函数DoSomethingHard（参数1、参数2、参数3）{
//在这里做些难的事
}
var i；
对于（i=0；i，除非使用递归或迭代器而不是循环，否则单击按钮很难取消它。
但当满足某些条件时，您可以使用
break；
语句取消自身内部的循环。例如，您可以编写：

    var result;
    for(i=0;i<=stuff.length;i++){
      result = DoSomethingHard(stuff[i].something1, stuff[i].something2, stuff[i].something3);
      if (result === 'error' || i === 50) break;
    }

var结果；
对于（i=0；i您可以使用
setInterval
调用该函数，当您有单击事件时，您可以
清除间隔

var mytimeout;


var i;
for(i = 0; i <= stuff.length; i++) {
  // "stuff" is an array
  mytimeout = window.setInterval(DoSomethingHard(stuff[i].something1, stuff[i].something2, stuff[i].something3), 2000);
}

$( "#button_to_cancel" ).click(function() {
  //something to cancel
  window.clearInterval(mytimeout)
});

var-mytimeout；
var i；
for（i=0；iJavascript是单线程的，for循环一直执行到结束

function DoSomethingHard(param){
 //do something
}

var i = 0;
var loopInterval = setInterval(function() {
  if (i >= stuff.length) {
    clearInterval(loopInterval);
    return;
  }
  DoSomethingHard(stuff[i]);
  i++
}, 10);

$( "#button_to_cancel" ).click(function() {
  clearInterval(loopInterval);
});

在我看来，最简单的方法是：

function DoSomethingHard(parameter1, parameter2, parameter3){
//Do Something Hard Here
}

var i;
var active = true; //as of now, we want to process stuff
for(i=0;i<=stuff.length;i++){
//"stuff" is an array
if(active){
  DoSomethingHard(stuff[i].something1, stuff[i].something2, stuff[i].something3);
}else {
   active = true; //reset active in case we want to run loop again later on
   break;        // break out of loop
}
}

$( "#button_to_cancel" ).click(function() {
  active = false;
 });

函数DoSomethingHard（参数1、参数2、参数3）{
//在这里做些难的事
}
var i；
var active=true；//到目前为止，我们想要处理一些东西
对于（i=0；i您需要注意循环是同步的，而函数不是同步的。循环不会等待
DoSomethingHard（）
在下一次迭代开始之前完成。在短短几毫秒内，
DoSomethingHard
被调用了上百次！而您的循环结束了，因此本质上，
break
在这里是没有用的。我想没有任何语言构造可以在这里提供帮助

那怎么办呢

您需要决定是否在函数本身中执行某些操作创建一个全局标志，并在函数内部检查它

function DoSomethingHard(){
  if(flag50done){
    return;
  }else{
    //do what this fn was meant for
  }
}

您可以通过单击按钮更改
flag50done
的值，由于
返回，进一步的操作将停止

如果
DoSomethingHard
是您无法修改的第三方函数，您可以将其包装在另一个函数中，比如
runDecider

   function runDecider(a,b,c){
      //add flag check here
      if(flag50done){
        return;
      }else{
       DoSomethingHard(a, b, c);
      }
   }

在循环中调用这个

var result;
for(i=0;i<=stuff.length;i++){
   result = runDecider(stuff[i].something1, stuff[i].something2, stuff[i].something3);
}

var结果；
for（i=0；i您不能从UI交互中停止for循环，因为所有内容都在单个线程中运行，并且您的操作只有在循环完全执行后才会执行。您可以使用@jason p所说的setInterval。
我这样解决：

function DoSomethingHard(parameter1, parameter2, parameter3){
    //Do Something Hard

    var timer = window.setInterval(function(){
    var page = $$('.page').data('page');
    console.log("The page is: "+page);
    if(page != 'preview'){
        //Cancel...

        console.log('Aborted');
        clearInterval(timer);
    }
 },1000);
}

也就是说，我更改了作用域。相反，我使用按钮单击来监视用户何时离开页面，所以取消它。
这被认为是一种反模式，但您可以创建一个全局变量。var isBreak=false；for（i=0，istuff[0]
，间隔将执行
DoSomethingHard
，然后检查是否取消。然后，对于
stuff[1]执行
DoSomethingHard
，然后检查取消。等等。如果有人在执行<代码> DoSomethingHard < /代码>的中间单击“取消”，则该调用将在进程取消之前完成。
function DoSomethingHard(parameter1, parameter2, parameter3){
    //Do Something Hard

    var timer = window.setInterval(function(){
    var page = $$('.page').data('page');
    console.log("The page is: "+page);
    if(page != 'preview'){
        //Cancel...

        console.log('Aborted');
        clearInterval(timer);
    }
 },1000);
}