香草JS试图维持执行顺序(异步)
问题描述:
我遇到了这个问题,我试图为从API检索图像并显示它的项目创建幻灯片。我有以下功能getPictures(id,number,callback)
,根据选项返回对象/数组/回调。香草JS试图维持执行顺序(异步)
加载picturesList
,我试图动态扩展它,它现在是一个全局变量,我正在修改点击nextPicture(button)
时的修改。
next.onclick = function() {
append();
nextPic();
};
我遇到的问题是,当我把一个条件来检查索引和检索一个新的picturesList,这样我可以追加到全球性的,它口口声声说,返回的数组是不确定的。
function append(){
var t;
getPictures(pic[0].id, 7, function(response) {
t = response.pics;
});
picturesList.push(t);
}
但执行顺序是什么,我无法控制并且是Java程序员几个概念都比较混乱。什么是最好的方法来解决这个问题?我读了回调和承诺,但他们似乎没有迎合设置全局变量(图片列表)
答
如果你只需要在异步调用完成后调用nextPic()
那么你可以简单地在回调中移动函数调用...
next.onclick = function() {
append();
};
function append(){
getPictures(pic[0].id, 7, function(response) {
picturesList.push(response.pics);
nextPic();
});
}
如果你想在其他地方使用append
功能,无需调用nextPic()
那么你可以添加一个可选的回调函数...
next.onclick = function() {
append(nextPic);
};
function append(callback){
getPictures(pic[0].id, 7, function(response) {
picturesList.push(response.pics);
if (callback != undefined) {
callback();
}
});
}
执行顺序很好 - 这是你对它的理解,这就是你的问题。 't'只在对'getPictures()'的异步调用完成时才被设置,但是该调用之后的下一行代码立即执行。 – Archer