Question

目前for循环执行直到结束，即使它调用的函数还没有完成执行。我想这样做，当调用startloop函数直到它完全执行循环时，不应该向前移动..怎么做？我试过模拟goto，但它没有工作..

这是我的代码：

function startLoop(i) {
  console.log("startloop function start");
  var centerX = xObj[i];
  var centerY = yObj[i];
  var radius = 10;

  var alpha = 1, /// current alpha value
    delta = 0.01; /// delta = speed
  var flag = 0;
  var num = 0

  function loop() {
    console.log("inside loop " + centerX + " " + centerY);
    alpha -= delta;
    if (alpha <= 0) {
      //console.log("heya_amigoes");
      num = 2;
      return;
    }
    //console.log("hi1");
    /// clear canvas, set alpha and re-draw image
    ctx2.clearRect(0, 0, 1000, 600);
    ctx2.globalAlpha = alpha;
    ctx2.beginPath();
    ctx2.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx2.fillStyle = "#FF0000";
    ctx2.fill();
    ctx2.lineWidth = 1;
    ctx2.strokeStyle = '#003300';
    ctx2.stroke();

    //console.log("hi2");
    //requestAnimationFrame(loop); // or use setTimeout(loop, 16) in older browsers
    setTimeout(loop, 16)
    console.log("Outside function loop");
  }

  loop();

  /*  
     LABEL1: do {
          if(num==2)
              {
              num=0;
              break LABEL1;
              }
          if(num!=2)
              continue LABEL1;
      }while(1);
  */

  console.log("startloop function stop");
}

for (i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);
  startLoop(i);
  console.log("outside loop func");
}

Answer 1

for循环不会等待你的任务。要完成此任务，您必须使用recursion。

<强>逻辑：

调用函数并在其中传递回调。
执行完成后，运行传递的回调。
现在我们必须反复链接相同的函数，再次将相同的回调传递给下一次迭代并进行检查（阈值限制）并停止违规。

var count = 0

function test1(i, cb){
  console.log("In Test " + i)
  if(i < 10)
    setTimeout(cb.bind(null, ++count, cb), 2000)
}


test1(count, test1)

<强>解释

我的方法模仿do..while循环的行为。它有4个部分：

初始化：这将初始化迭代器变量。此变量将用于检查终止条件并检查当前迭代器的值。在我的案例中：count = 0
执行代码块：这将执行{...}中定义的代码。就我而言：test1(count, test1)
终止条件：检查是否应执行下一次迭代？就我而言：if(i<10)。如果满足条件，则开始下一次迭代：setTimeout(cb.bind(null, ++count, cb), 2000)
增量值：此更新的迭代器值指向下一个值。就我而言：++count

这是最后的JSFiddle

Answer 2

我认为问题与你的for循环有关。 startLoop函数始终会获得xObj.length-1。

您可以阅读有关此问题的更多信息：JavaScript closure inside loops – simple practical example

每个匿名函数中的变量i都绑定到函数之外的相同变量。

ES6 let功能解决方案：

for (let i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);

  startLoop(i);

  console.log("outside loop func");

}

没有ES6的解决方案：

var funcs = [];

for (var i = 0; i < xObj.length; i++) {
  funcs[i] = startLoop(i);
}

for (var i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);

  funcs[i]();

  console.log("outside loop func");

}

保持循环不在Javascript中执行

2 个答案: