如何使这个 'if sentences' 顺序？

Question

function FadeAnimation(){
    $(document).ready(function(){ 
    let delay= 8000;
    var num = 0;
    if(num % 4 == 0){
        fade_slider('#eclipse_1');
        fade_slider('#main_photo_animation_one');
        num++;

        setTimeout(()=>{
            if(num % 4 == 1){
                fade_slider('#eclipse_2');
                fade_slider('#main_photo_animation_two');
                num++;

                setTimeout(()=>{
                    if(num % 4 == 2){
                        fade_slider('#eclipse_3');
                        fade_slider('#main_photo_animation_three');
                        num++;

                        setTimeout(()=>{
                            if(num % 4 == 3){
                                fade_slider('#eclipse_4');
                                fade_slider('#main_photo_animation_four');
                                num++;
                            }
                        });
                    }
                }, delay);
            }
        }, delay);
    }
    FadeAnimation();
})};

function fade_slider(a){
    $(document).ready(function(){ 
        $(a).fadeIn(4000);
        $(a).fadeOut(4000);
    })
}

我想按顺序操作这个 if 语句，但它不起作用。四张照片同时淡入淡出，我想让它有序。如何解决这个问题？我想 setInerval 或 setTimeout 可能是解决方案，但我不知道该怎么做。请帮忙！

Answer 1

所有 if 语句都按顺序工作，但问题是它太快了，似乎同时消失了。

为了解决这个问题，在if语句中，可以添加setTimeout()函数，并在函数内部提供if语句

setTimeout(()=>{
    // your next if statement goes here
}, 1000);

这里给出了 1 秒的超时 (1000ms)。

我们这样做是因为 setTimeout() 是一个回调函数，如果你只在 if 语句中给出空超时，它会在代码中前进。

您的 if 语句的嵌套将如下所示：-

let delay=1000; // setting value for timeout in ms
if(num % 4 == 0){
    fade_slider('#eclipse_1');
    fade_slider('#main_photo_animation_one');
    num++;

    setTimeout(()=>{
        if(num % 4 == 1){
            fade_slider('#eclipse_2');
            fade_slider('#main_photo_animation_two');
            num++;

            setTimeout(()=>{
                if(num % 4 == 2){
                    fade_slider('#eclipse_3');
                    fade_slider('#main_photo_animation_three');
                    num++;

                    setTimeout(()=>{
                        if(num % 4 == 3){
                            fade_slider('#eclipse_4');
                            fade_slider('#main_photo_animation_four');
                            num++;
                        }
                    });
                }
            }, delay);
        }
    }, delay);
}

另一种方法可以使它看起来更简单：-

let delay=1000;
setTimeout(()=>{
    if(num % 4 == 0){
        fade_slider('#eclipse_1');
        fade_slider('#main_photo_animation_one');
        num++;
    }
}, delay);

setTimeout(()=>{
    if(num % 4 == 1){
        fade_slider('#eclipse_2');
        fade_slider('#main_photo_animation_two');
        num++;
    }
}, delay*2);

setTimeout(()=>{
    if(num % 4 == 2){
        fade_slider('#eclipse_3');
        fade_slider('#main_photo_animation_three');
        num++;
    }
}, delay*3);   

setTimeout(()=>{
   if(num % 4 == 3){
        fade_slider('#eclipse_4');
        fade_slider('#main_photo_animation_four');
        num++;
    }
}, delay*4);

这是一回事，但我们没有嵌套代码块，也没有将超时延迟设置得每次都更长

///////编辑///////
您可以更改动画的 id，例如 #main_photo_animation_4 而不是 #main_photo_animation_four 并使用更简单的代码：-

let i;
let num_pictures=4;
let delay=1000;

for(i=1;i<=num_pictures;i++){
    setTimeout(()=>{
        if(num % num_pictures == i){
            fade_slider('#eclipse_'+i);
            fade_slider('#main_photo_animation_'+i);
            num++;
        }
    }, delay*i);
}

这现在适用于任意数量的图像

Answer 2

您可以使用Promise、async/await

$(document).ready(function(){ 
    FadeAnimation();
})

async function FadeAnimation() {
    await fade_slider('#eclipse_1');
    await fade_slider('#main_photo_animation_one');
    await fade_slider('#eclipse_2');
    await fade_slider('#main_photo_animation_two');
    await fade_slider('#eclipse_3');
    await fade_slider('#main_photo_animation_three');
    await fade_slider('#eclipse_4');
    await fade_slider('#main_photo_animation_four');
}

function fade_slider(a) {
  return new Promise((resolve, reject) => {
      $(a).fadeIn(4000, () => {
          $(a).fadeOut(4000, () => {
              resolve();
          });
      });
  })
}

使用jquery的promise():

function fade_slider(a) {
  return $(a).fadeIn(4000).fadeOut(4000).promise();
}

如何使这个 'if sentences' 顺序？

How to make this 'if sentences' sequentially?

html

javascript

css