How to execute a script with a delay?

Question

JavaScript

There are two simple scripts that run css animation. The task is to modify both codes so that they start executing with a delay of one second.

$( document ).ready(function() {
$('.device-arrow15').addClass("slideUp");
});

$(window).scroll(function() {	
$('#example-13').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow13').addClass("slideLeft");
}
});	
});

Answer 1

Solution for the first script:

$( document ).ready(function() {
setTimeout(function() {
$('.device-arrow14').addClass("slideUp");
}, 1000);
});

Solution for the second one:

$(window).scroll(function() {	
setTimeout(function() {
  $('#example-13').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow13').addClass("slideLeft");
}
});	
}, 1000);
});

Answer 2

. delay (1000) If jquery
setTimeout if JS

Answer 3

setTimeout()

Answer 4

In your example, they will appear at the same time, so that this happens with a delay, you can do this

setTimeout(function () {
    // Анимация для 1, когда она закончится, начнется для 2
    setTimeout(function () {
    // // Анимация для 2, когда она закончится, начнется для 3, и т д 
    }, 1000);
}, 1000);

I think the essence is clear, well, it’s good when there are 2-4 elements, but if there are more of them, it’s better to run through everything in a loop and do it in order, otherwise the code will turn into a trash can