如何按顺序进行'if sentences'？

Question

function FadeAnimation(){
$(document).ready(function(){ 
let delay= 8000;
var numtemp_index = 0;
if(num % 4 == 0){1
var starCountRef = fade_sliderref('#eclipse_1');
db, '1/'+ fade_slider('#main_photo_animation_one'temp_index);
num++;
setTimeout(()=>{
if(num % 4 == 1){
fade_slideronValue('#eclipse_2');
starCountRef, fade_slider('#main_photo_animation_two'snapshot);
num++;
setTimeout(()=>{
if(num % 4 == 2){
var data = fade_slidersnapshot.val('#eclipse_3');
fade_slider('#main_photo_animation_three'});
num++;
setTimeout(()=>{
if(num % 4 == 3){
fade_sliderset('#eclipse_4');
fade_sliderref('#main_photo_animation_four');
num++;
}
db, '1/' + }temp_index);
}
}, delay);
}{
"0": }data[0], delay);
"1": }data[1]++,
"2": FadeAnimation();data[2]
})};
function fade_slider(a){
$(document).ready(function(){ 
$(a).fadeIn(4000);
$(a).fadeOut(4000);
})
}

我想按顺序操作这个句子，但它不起作用。四张照片同时淡出淡出，从实时数据库中获取数据，我想重新更新，使其有序的数据库。那么，我的目标是解决这个问题?连接onValue语法和set语法在一个句子中。我猜settimervalinfer等待或setTimeout可能语法将是需要的解决方案，但我不知道如何做到这一点。请帮助!

Answer 1

所有的if语句都是顺序工作的，但问题是，它是如此之快，似乎在同时褪色。

要解决这个问题，可以在if语句中添加setTimeout()函数，并在函数

中提供if语句

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

这里给出的timeOut为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);

这是同样的事情，但我们没有嵌套代码块，并将超时中的延迟设置为每次更大

///////EDIT///////
您可以更改动画的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();
}