如何让它等到一切都完成，直到下一次迭代

Question

所以我在这里有这个函数，我用它来迭代作为对象数组的音节

function showImagesByPairAtInterval(Syllables, interval, index) {
            index = index || 0;
            let slice = Syllables[index];
            nextIndex = index + 1;
            drawimagesonCanvas(slice.Url1, slice.Url2);//not finishing

            if (nextIndex <= Syllables.length - 1) {
                syllable_text.html(slice.The_Syl);

                setTimeout(showImagesByPairAtInterval.bind(
                    null,
                    Syllables,
                    interval,
                    nextIndex
                ), interval);
            }
            else {
                explain.html("Try Me Again");
                syllable_text.html("<br/>");
                $('#translate_button').removeAttr('disabled');
            }
        }

问题是drawimagesonCanvas 无法完成它的工作，它在interval 时间之后进入下一次迭代

这里是drawimagesonCanvas代码：

 function drawimagesonCanvas(url1,url2)
    {
        var canvas = document.getElementById("canvas_images");

        var IsBoth = (url2=="null");
        var context = canvas.getContext('2d');

        var img1 = new Image();
        var img2 = new Image();
        context.clearRect(0, 0, canvas.width, canvas.height);


        if (!IsBoth) {
                img1.onload = function () {
                    context.drawImage(img1, 0, 0, 150, 350);

                };
                img1.src = api + url1;

                img2.onload = function () {
                    context.drawImage(img2, 150, 0, 150, 350);
                };
                img2.src = api + url2;
        }
        else
        {
            img1.onload=function(){

            context.drawImage(img1,0,0,300,350);
            }
            img1.src = api + url1;

        }

有没有办法让这个问题消失，请注意图像在服务器在线并且它不是本地的

Answer 1

您可以向drawimagesonCanvas 添加回调，但是由于您可能正在等待一两张图片，这会使使用回调变得复杂，并非不可能，只是（在我看来）混乱

为此使用 Promise 将是一个更简洁的解决方案。

首先，我创建了一个函数loadImage，它返回一个在加载图像后解析的 Promise。这样，当有两张图片时我可以使用 Promise.all，当只有一张图片时，只需从loadImage 返回承诺

注意，我还将IsBoth 的逻辑更改为更“正确”，即当有两个图像要加载时，IsBoth 为 TRUE。

drawimagesonCanvas 返回一个 Promise，一旦图像完成就会解析，在 .then 中检查是否需要进行更多处理，并像在代码中一样使用 setTimeout 调用 drawimagesonCanvas。

function drawimagesonCanvas(url1, url2) {
    var canvas = document.getElementById("canvas_images");
    var IsBoth = (url2 != "null");
    var context = canvas.getContext('2d');
    let loadImage = (url, x, y, w, h) => new Promise((resolve, reject) => {
        var img = new Image();
        img.addEventListener('load', () => {
            context.drawImage(img, x, y, w, h);
            resolve();
        });
        img.src = url;
    });
    context.clearRect(0, 0, canvas.width, canvas.height);
    if (IsBoth) {
        return Promise.all([
            loadImage(api + url1, 0, 0, 150, 350),
            loadImage(api + url2, 150, 0, 150, 350)
        ]);
    } else {
        return loadImage(api + url1, 0, 0, 300, 350);
    }
}

function showImagesByPairAtInterval(Syllables, interval, index) {
    index = index || 0;
    let slice = Syllables[index];
    nextIndex = index + 1;
    drawimagesonCanvas(slice.Url1, slice.Url2)
    .then(() => {
        if (nextIndex <= Syllables.length - 1) {
            syllable_text.html(slice.The_Syl);
            setTimeout(showImagesByPairAtInterval.bind(
                null,
                Syllables,
                interval,
                nextIndex
            ), interval);
        } else {
            explain.html("Try Me Again");
            syllable_text.html("<br/>");
            $('#translate_button').removeAttr('disabled');
        }
    });
}