尝试在JavaScript中执行异步功能时遇到问题。基本上我有一个pointArr来存储沿路线的坐标。然后,我得到一个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);
}
}

最佳答案

如果在调用callback时实际上没有传递函数,则为moveNext()函数引入moveNext()参数没有帮助。您显示的代码仍然只传递原始的五个参数,因此当您尝试使用callback(totalBusLoc)时,您会发现callbackundefined

因此,您可以将调用更改为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的所有三个位置都引用了相同的变量。

(注意:我还简化了代码。在您拥有变量的情况下,这些变量在被赋值后仅使用过一次,因此我摆脱了这些变量。但是,我所显示的内容仍然应该做同样的事情。)

08-25 20:00