JavaScript 异步循环没有 return 结果
JavaScript Asynchronous Loop does not return results
我在 JavaScript 中尝试执行异步功能时遇到了一些问题。基本上我有一个 pointArr 来存储沿路线的坐标。然后我得到了一个 moveNext() ,它接收沿路线的每个坐标并绘制到地图上。然后在 moveNext() 中,我得到了另一个数组,它是 busList。如果沿路线的坐标与 busList 的坐标匹配,则我将 totalBusStopLeft 减一。这是我调用 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。我想知道如何 return 从 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);
}
}
你可以用 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');
}
});
如果您在调用 moveNext()
时实际上没有传递函数,那么为您的 moveNext()
函数引入 callback
参数没有帮助。您显示的代码仍然只传递原始的五个参数,因此当您尝试使用 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
的所有三个地方都引用了 same 变量。
(注意:我还稍微简化了您的代码。您的变量在被赋值后仅使用一次,我删除了这些变量。但我所展示的仍然应该做同样的事情。 )
我在 JavaScript 中尝试执行异步功能时遇到了一些问题。基本上我有一个 pointArr 来存储沿路线的坐标。然后我得到了一个 moveNext() ,它接收沿路线的每个坐标并绘制到地图上。然后在 moveNext() 中,我得到了另一个数组,它是 busList。如果沿路线的坐标与 busList 的坐标匹配,则我将 totalBusStopLeft 减一。这是我调用 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。我想知道如何 return 从 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);
}
}
你可以用 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');
}
});
如果您在调用 moveNext()
时实际上没有传递函数,那么为您的 moveNext()
函数引入 callback
参数没有帮助。您显示的代码仍然只传递原始的五个参数,因此当您尝试使用 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
的所有三个地方都引用了 same 变量。
(注意:我还稍微简化了您的代码。您的变量在被赋值后仅使用一次,我删除了这些变量。但我所展示的仍然应该做同样的事情。 )