CODEWITHSUNDEEP
javascriptjquery
Jhon Donald
Jhon Donald

Reputation: 59

Set a delay between For loop

i made this function with jquery and i want to set a delay between every loop i tried to setInterval inside the for loop but it doesn't work .

  $(document).ready(function() {
    $(window).scroll( function(){
      for(let i =1;i <=6 ;i++){
      $('#steps_icon-'+i).each( function(){
              var bottom_of_object = $(this).position().top + $(this).outerHeight();
              var bottom_of_window = $(window).scrollTop() + $(window).height();
              if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'
                ,'transform':'translateY(0px)',
                },2000);
            }
        });
      }
    });
});

what this function does when you scroll it will make an icon appear but i want to set delay between every icon to appear .

Upvotes: 0

Views: 43

Answers (1)

Koray Kural
Koray Kural

Reputation: 168

You can use setTimeout to make it wait. Bu it is asynchronous so you should use async-await keywords.

// Function to make program wait
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Your code
$(document).ready(function() {
  $(window).scroll( async function(){ // Added async keyword here
    for(let i =1;i <=6 ;i++){
    await sleep(200) // Added this line
    $('#steps_icon-'+i).each( function(){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
              $(this).animate({'opacity':'1'
              ,'transform':'translateY(0px)',
              },2000);
          }
      });
    }
  });
});
```

Upvotes: 1

Related Questions