Блог

я создал эту функцию с помощью jquery, и я хочу установить задержку между каждым циклом, я пытался setInterval внутри цикла for, но это не работает.

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

то, что эта функция делает при прокрутке, приведет к появлению значка, но я хочу установить задержку между появлением каждого значка.

Вы можете использовать setTimeout, чтобы заставить его ждать. Но он асинхронный, поэтому вам следует использовать ключевые слова async-await.

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