JS：带有暂停的for循环答案

【问题标题】：JS: for loop with pausesJS：带有暂停的for循环
【发布时间】：2014-04-09 19:30:53
【问题描述】：

如何在满足特定条件时暂停循环？在下面的示例中，循环仅一次显示所有值，而我希望它在遇到特定值（例如 2）时停止：

a = [1,1,1,2,1,1,1,3,4,2,1]
for (var i = 0; i < a.length; i++) {
    if(a[i] == 2){
        setTimeout(console.log(a[i]), 1000)
    }else{
        console.log(a[i]);
    }
};

【问题讨论】：

javascript 没有 pause 功能，您需要重构代码以使用 setTimeout 和设置变量来标记何时暂停和何时继续等。
在重构中，您可能希望将i 限定在函数之上，以便在多个调用之间共享它
触发debugger;?你想通过暂停来达到什么目的？不同的目标需要不同的方法。
setTimeout 的参数是要调用的函数或要计算的字符串。将console.log 放在那里会立即调用它，而不是在超时之后。
这里有一个选项可以自定义“暂停”的时间和数量：jsfiddle.net/R4jeL

标签： javascript for-loop conditional

【解决方案1】：

正如其他人所说，JavaScript 中没有 pause。这是一个异步循环的示例；

(function() {
  var a = [1,1,1,2,1,1,1,3,4,2,1];
  var i = 0;
  var length = a.length;

  function iteration() {
    if (i == length) return;

    console.log(a[i]);

    if(a[i] == 2){
      setTimeout(iteration, 1000);
    }else{
      setTimeout(iteration, 0);
    }

    i++;
  };

  iteration();
}());

【讨论】：

【解决方案2】：

你不能直接做，但你可以模拟如下（你可以在这里测试代码：http://jsfiddle.net/xSu5J/）：

function myLoop(a) {
    function showElem(index) {
        if (index < a.length) {
            var nextWaitTime = (a[index] == 2) ? 1000 : 1; //1000: long period, 1: short period
            console.log(a[index]);
            setTimeout(function(){showElem(index+1)}, nextWaitTime);
        }
    }
    showElem(0);
}
myLoop([1,1,1,2,1,1,1,3,4,2,1]);

【讨论】：

【解决方案3】：

我真的不知道你为什么要实现这一点，但如果你想实现这一点，你需要一个调用自身的函数：

function myLoop(index){ 
    index = index || 0;

    a = [1,1,1,2,1,1,1,3,4,2,1]
    for (var i = index; i < a.length; i++) {
        if(a[i] == 2){
            setTimeout(function(){
                console.log(a[i]);
                myLoop(++i)
            }, 1000)
            break;
        }else{
            console.log(a[i]);
        }
    };    
}

myLoop()

http://jsfiddle.net/EUh3m/2/

【讨论】：

【解决方案4】：

小提琴：http://jsfiddle.net/Uqr49/

var a = [1, 1, 2, 3, 1, 1, 2, 3];

function pauseOnTwo(arr) {

    if (arr.length > 1) {
        var slice = arr.shift();
        if (slice === 2) {
            setTimeout(function () {
                console.log('found a two! ' + slice);
                pauseOnTwo(arr);
            }, 1000);

        } else {
            console.log('its not 2: ', slice);
            pauseOnTwo(arr);
        }

    } else {
        if (arr[0] === 2) {
            setTimeout(function () {
                console.log('found a two! ' + slice);
            });
        }
    }
}

pauseOnTwo(a);

【讨论】：

【解决方案5】：

下面创建了一个函数，它接受 3 个参数、一个数组、暂停时间（以毫秒为单位）以及暂停的内容。在函数内部，它将创建一个私有函数，用于循环数组。如果遇到了 pauseOn 值，则使用 setTimeout 在指定的 pauseTime 之后调用循环函数

var arr = [1,1,1,2,1,1,1,3,4,2,1];

function iterateArray(arr,pauseTime,pauseOn){
   var currentIndex=0;

   function loop(){    
      for(i=currentIndex;i<arr.length; i++){
         console.log(arr[i]);
         if(arr[i]==pauseOn){
            currentIndex = i+1;
            setTimeout(loop,pauseTime);
            return;
         }
      }
   }
   loop();
}
iterateArray(arr,3000,2);

【讨论】：