javascript - 仅在执行前一条语句后才开始的语句

Question

初学者问题在这里。我正在使用 JavaScript 和 jQuery 构建一个照片查看器。

当您单击箭头查看下一张图片时，我希望当前图片淡出，然后下一张图片淡入。我遇到的问题是，如果图片加载时间稍长，当淡入开始时，我想让旧图片仍然存在，所以本质上我需要的是确保在加载新图片之前不会开始淡入。

所以这三个语句必须运行，每个语句只有在前一个语句已经执行时才执行:

$('#image').fadeOut(500);
getImage();
$('#image').fadeIn(500);

这是我获取新图像的函数:

getImage = function() {
    document.getElementById("image").src = "Images/Image" + counter + ".jpg";
}

其中 counter 是我之前声明的变量，当您单击“下一步”按钮等时它会更新...

所以，由于对编程了解不多，我正在寻找一种方法来确保这一点

$('#image').fadeIn(500);

除非已获取新图像或发生的情况是旧图像开始淡入然后我们得到新图像，否则不会运行。

我试过回电，像这样:

$('#image').fadeOut(500, function() {
        getImage();
});

$('#image').fadeIn(500);

但这行不通，因为您需要在回退中进行回退，而我不知道该怎么做。

我尝试过的另一件事是做这样的事情:

var hasloaded = $('#image').fadeOut(500, function() {
    getImage();
});

if (hasloaded)
{$('#image').fadeIn(500);}

这也行不通，尽管我认为我写它的时候真的很聪明。

感谢任何帮助。

谢谢。

Answer 1

您可以创建一个 JavaScript Image 对象，并在 load 事件中将 src 设置为目标元素

$('#image').fadeOut(500, function () {
    getImage(function () {
        $('#image').fadeIn(500);
    });
});

getImage = function (cb) {
    var img = new Image();
    img.onload = function () {
        document.getElementById("image").src = img.src;
        cb();
    };
    img.src = "Images/Image" + counter + ".jpg";
}

---

使用 promise()

$('#image').fadeOut(500, function () {
    getImage().then(() => {
        $('#image').fadeIn(500);
    });
});

getImage = function () {
    return new Promise((resolve, reject) => {
        var img = new Image();
        img.src = "Images/Image" + counter + ".jpg";
        img.onload = function () {
            document.getElementById("image").src = img.src;
            resolve("Success!");
        };
    });
}