JavaScript 异步循环不返回结果

JavaScript Asynchronous Loop does not return results

本文关键字：返回 结果 循环 异步 JavaScript      更新时间：2023-09-26

我在尝试在JavaScript中执行异步函数时遇到了一些问题。基本上我有一个点Arr来存储沿路线的坐标。然后我得到了一个 moveNext（），它沿途获取每个坐标并绘制在地图上。然后在 moveNext（） 中，我得到了另一个数组，它是 busList。如果沿途的坐标与 busList 的坐标匹配，那么我将 totalBusStopLeft 减去 1。这是我调用 moveNext（） 的代码：

 getAllBusLoc(function(busList) {
            //At first I set the totalBusLeft by the length of busList which is 13 in this case
            var totalBusLoc = busList.length;
            document.getElementById("busStopLeft").innerHTML = totalBusLoc;
                 timeout = 1500;
            pointArr.forEach(function(coord,index){
                setTimeout(function(){
                    moveNext(coord.x, coord.y, index, busList, totalBusLoc);
                }, timeout * index);
            });
        });
function moveNext(coordx, coordy, k, busList, totalBusLoc ){
//pointToCompare is the coordinates in the route but not the coordinates of busList
var pointToCompare = coordx + "," + coordy;
//If the coordinates in route matches the coordinate in busList, I minus busLeft by one
if(busList.indexOf(pointToCompare) > -1){
     parseFloat(totalBusLoc--);
             document.getElementById("busStopLeft").innerHTML = totalBusLoc ;
}
//Code to Add marker
}

但是，使用此代码，我的 HTML 组件 busStopLeft 一直显示 13，这是原始的 totalBusLoc。我想知道我如何从 moveNext（） 返回已减少的 totalBusLoc。有什么想法吗？

我尝试使用 async.eachSeries，但是当我导入该 async.js 时，它给了我另一个错误消息，该消息与 dojo 崩溃。提前谢谢。

这是我尝试使用回调的部分：

totalBusLoc = busList.length;
        document.getElementById("busStopLeft").innerHTML = totalBusLoc;
        timeout = 1500;
        pointArr.forEach(function(coord,index){
            setTimeout(function(busLeft){
                moveNext(coord.x, coord.y, index, busList, totalBusLoc);
            }, timeout * index);
        });
    });

function moveNext(coordx, coordy, k, busList, totalBusLoc, callback){
var pointToCompare = coordx + "," + coordy;
 if(busList.indexOf(pointToCompare) > -1){
 parseFloat(totalBusLoc--);
 document.getElementById("busStopLeft").innerHTML = totalBusLoc;
 callback(totalBusLoc);
}
}

如果在调用函数时实际上没有传递函数，则为 moveNext() 函数引入 callback 参数无济于事moveNext()。您展示的代码仍然只传递了原来的五个参数，因此当您尝试使用callback(totalBusLoc)时，您会发现callback undefined。

因此，您可以将调用更改为moveNext()以传递回调函数：

moveNext(coord.x, coord.y, index, busList, totalBusLoc, function(newTotalBusLoc) {
  totalBusLoc = newTotalBusLoc;
});

这应该有效，因为我引入的函数在范围内具有原始totalBusLoc变量。

但这似乎有点混乱，像这样来回传递值。鉴于您在评论中确认moveNext()没有在其他任何地方使用并且不包含太多代码，我可能会摆脱该函数并将其正文直接移动到您传递给setTimeout()的匿名函数中：

getAllBusLoc(function(busList) {           
    var totalBusLoc = busList.length;
    document.getElementById("busStopLeft").innerHTML = totalBusLoc;
    pointArr.forEach(function(coord,index){
        setTimeout(function(){
            if (busList.indexOf(coord.x + "," + coord.y) > -1)
                document.getElementById("busStopLeft").innerHTML = --totalBusLoc;
        }, 1500* index);
    });
});

传递给setTimeout()的内部匿名函数可以访问在其包含函数中声明的变量，因此它可以直接访问外部totalBusLoc变量。也就是说，我显示的代码中引用totalBusLoc的所有三个位置都引用了相同的变量。

（注意：我也稍微简化了你的代码。如果你有变量在被赋值后只使用一次，我摆脱了这些变量。但是我所展示的内容仍然应该做同样的事情。

你可以用async尝试这样的事情：

  index = 0;
  async.eachSeries(pointArr, function(coord, moveNext){
      moveNext(coord.x, coord.y, index, busList, totalBusLoc);
      index = index + 1;
    }, function(err){
      if( err ) {
        console.log('Failed');
    }
  });
相关文章：