javascript - 使用链式 JavaScript Promises 淡出/淡入图像

Question

我正在尝试创建一个非 JQuery 图像幻灯片，其中图像基于计时器淡入/淡出。经过今天的大量研究，我相信 JavaScript 的 Promise 功能可以做到这一点，但它不太正确......

我的问题是淡入和淡出功能似乎同时发生，所以图像只是闪烁。我正在尝试调整使用 then() 链接函数的许多示例中的一些示例，但显然有些地方不对。

我的逻辑是:

1. 在页面加载时显示初始图像(通过 CSS 规则)
2. 淡出
3. 更改背景图片网址
4. 淡入

我的 online example is here , JavaScript 在这里:

// Background images to show
var arr_Images = [
    'https://cdn.pixabay.com/photo/2015/08/24/12/53/banner-904884_960_720.jpg',
    'https://cdn.pixabay.com/photo/2016/11/19/22/52/coding-1841550_960_720.jpg',
    'https://cdn.pixabay.com/photo/2014/05/27/23/32/matrix-356024_960_720.jpg'
];

var cycleImage = document.getElementById("cycleImage");

// Preload images
for(x = 0; x < arr_Images.length; x++)
{
  var img = new Image();
    img.src = arr_Images[x];
}

function fadeOutPromise(element, nextBgImgUrl) {
    console.log("Fading out");
    return new Promise(function(resolve) {
        var op = 1;  // initial opacity
        var timer1 = setInterval(function () {
            if (op <= 0.1){
                clearInterval(timer1);
                element.style.display = 'none';
                cycleImage.style.backgroundImage = "url('" + nextBgImgUrl + "')";
            }
            element.style.opacity = op;
            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
            op -= op * 0.1;
        }, 100);
        resolve("Faded In");
    });
}

function fadeInPromise(element) {
    console.log("Fading in");
    return new Promise(function(resolve) {
        var op = 0.1;  // initial opacity
        element.style.display = 'block';
        var timer2 = setInterval(function () {
            if (op >= 1){
                clearInterval(timer2);
            }
            element.style.opacity = op;
            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
            op += op * 0.1;
        }, 10); 
        resolve("Faded Out");
    });
}

function slideShow() {

    // Loop background image using array
    var i = 0;
    var delay = 3000;

    // Loop
    let imageLoopTimer = setTimeout(function tick() {

        fadeOutPromise(cycleImage, arr_Images[i]).then(
            fadeInPromise(cycleImage).then(function() {
                i++;
                if ( i >= arr_Images.length) { i = 0; }
                imageLoopTimer = setTimeout(tick, delay);               
            })
        );

    }, delay);

}

slideShow();

有人可以先解释一下哪里出了问题，然后再提供解决方案吗？

Answer 1

你快到了。问题是你如何兑现你的 promise 。您打算在淡入淡出功能中做的是:
- 创建 promise
- 以间隔执行逻辑
- 解决 promise

但是你立即解决了这个 promise ，而你应该在 fade 操作完成后解决你的 promise :

function fadeInPromise(element) {
    console.log("Fading in");
    return new Promise(function(resolve) {
        var op = 0.1;  // initial opacity
        element.style.display = 'block';
        var timer2 = setInterval(function () {
            if (op >= 1){
                clearInterval(timer2);
                resolve():  // Fade is done here
            }
            element.style.opacity = op;
            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
            op += op * 0.1;
        }, 10); 
    });
}

淡出也是一样

关于闪烁的另一个提示如果你想要平滑的效果，你不应该经常改变不透明度。在 css 中，已经有 'transition' 属性。所以你应该用转换做这样的事情:
- 显示不透明度为 1 的图像
- 将 opactiy 设置为 0
- 在 ms 之后，更改 url 并将不透明度设置为 1