JavaScript while循环每个数据一个一个地传递给另一个函数

Question

我在 JavaScript 中的 while 循环遇到了一些逻辑问题。所以基本上我试图循环一个坐标列表，在每个坐标处，我正在执行 moveNext() ，它将绘制一个标记并循环直到 while 循环结束。这是代码：

var k = 1;
        while(k < pointArr.length){
            var coordx = pointArr[k].x;
            var coordy = pointArr[k].y;
            window.setTimeout(function(){
                moveNext(coordx, coordy, k);   
            },500);
            k++;
        }

如果参数 k 大于全局计数器变量，则 moveNext() 在地图上绘制标记：

var counter = 0;
function moveNext(coordx, coordy, k){
if(k > counter){
    console.log(coordx);
    console.log(coordy);
    map.graphics.clear();
    var point = new esri.geometry.Point({ "x": coordx, "y": coordy, "spatialReference": { "wkid": 3414 } });
    var symbol = new esri.symbol.PictureMarkerSymbol('img/transportation/currentLoc.GIF', 30, 30);
    var PointGraphic = new esri.Graphic(point, symbol);
    map.graphics.add(PointGraphic);

    var graphic = PointGraphic;
    graphic.setSymbol(symbol);
    map.graphics.add(graphic);

    counter++;
}
}

但是，使用这些代码，它不会在地图上逐点绘制标记执行 setTimeout。相反，它一直循环直到 while 循环结束并在那里绘制最后一个标记。有指导吗？

提前致谢。

Answer 1

该问题是因为setTimeout在当前方法执行结束后才执行传入的方法。并且由于传递给 setTimeout 的方法的范围包含在当前方法的范围内（参见 closure），您的 moveNext 方法将仅获取 coordX 和 coordY 的最后值。

您可以通过将 setTimeout 调用添加到即时函数中来解决此问题。这样，参数 coordX 和 coordY 将在函数立即执行时保持不变，并设置进一步执行的超时时间。

var pointArr = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}];

var k = 0;
while(k < pointArr.length){
  var coordx = pointArr[k].x;
  var coordy = pointArr[k].y;

  (function(coordx, coordy, k) {
    window.setTimeout(function(){
      moveNext(coordx, coordy, k);   
    },500);
  })(coordx, coordy, k);

  k++;
}

function moveNext(x, y, k) {
  alert(x + ' - ' + y + ' - ' + k);
}

如果你想在每个绘图之间等待 500 毫秒，你可以这样做：

var pointArr = [{x: 1, y: 2}, {x: 2, y: 2}, {x: 3, y: 3}];

function moveToNextPoint(k) {
  if(k < pointArr.length) {
    var coordx = pointArr[k].x;
    var coordy = pointArr[k].y;
    moveNext(coordx, coordy, k);

    setTimeout(function() {
      moveToNextPoint(k + 1);
    }, 500);
  }
}


function moveNext(x, y, k) {
  alert(x + ' - ' + y + ' - ' + k);
}

moveToNextPoint(0);

Answer 2

也许如果你想使用 forEach 而不是 while

timeout = 500;
pointArr.forEach(function(coord,index){
    setTimeout(function(){
        moveNext(coord.x, coord.y, index);
    }, timeout * index);
});

希望对您有所帮助..

ps：我不喜欢用while，因为条件填错了可能会无限循环

JavaScript while循环每个数据一个一个地传递给另一个函数

JavaScript while loop each data one by one passing into another function

javascript

maps

logic

while-loop