Question

我遇到了这个问题，我正在尝试为项目创建幻灯片，该项目从API检索图像然后显示它。我有跟随函数getPictures(id,number,callback)，它根据选项返回对象/数组/回调。

要加载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程序员，一些概念相当令人困惑。什么是最好的方法来解决这个问题？我读过有关回调和承诺的内容，但它们似乎都不适合设置全局变量（picturesList）

Answer 1

如果您只需要在异步调用完成后调用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();
        }
    });
}

Vanilla JS尝试维护执行顺序（异步）

1 个答案: