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而不是

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

希望它有所帮助..

ps：我不喜欢使用while，因为如果错误填写条件，它有可能无限循环

JavaScript将while数据逐个循环传入另一个函数

2 个答案: