How to make this 'if sentences' sequentially?

user_19126106 0
Viewed 100
var temp_index = 1
var starCountRef = ref(db, '1/'+ temp_index);
onValue(starCountRef, (snapshot) => {
    var data = snapshot.val();
})

set(ref(db, '1/' + temp_index), {
   "0": data[0],
   "1": data[1]++,
   "2": data[2]
});

I want to get the data from realtime database, and then update newly to database. So, my goal is to connect onValue syntax and set syntax in one sentence. I infer that await or then syntax will be needed, but I don't know how to do it. Please Help!

firebase javascript
2 Answers

All the if statements are working sequentially but the thing is that it is so fast it seems to be fading simultaneously.

To solve that, in the if statement, you can add the setTimeout() function, and provide the if statement inside the function

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

Here, a timeOut of 1 sec is given (1000ms).

We do this as setTimeout() is a callback function and if you only give the empty timeout inside the if statement, it will move forward in code.

The nesting of your if statements will look like this:-

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);
}

Another way to do this can make this a bit simpler to look:-

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);

It is the same thing but we are not nesting the code blocks and setting delay in the timeout to be more each time

///////EDIT///////
You could change the id of animations like #main_photo_animation_4 instead of #main_photo_animation_four and use the simpler code:-

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);
}

This will now work for any number of images

user_155431000

You can use 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();
          });
      });
  })
}

Use jquery's promise():

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