Make Jquery take a short break

Question

Im trying to make my program just chill out for 3 sekunds and then proceed with the rest of the code - but all the stuff i can finde online just delays specifit lines of code (any way not what i was looking for)

What i wish to do is something like this

                $("#one").attr("id","H1");
                $("#line1").attr("id","line2");

                setTimeout(3000);

                $("#line2").attr("id","line1");
                $("#H1").attr("id","two");

And it should just chillout for 3 sekunds where i have placed the settimeout(3000); but can make it work ? im i missing something obvious ?

Thanks alot ! :D

Answer 1

Normally when someone wants JavaScript, which is a single-thread event-based model, to sleep, they do not quite understand the language.

You are not supposed to block code. Instead, you should make use of callbacks, event triggers or Promises to run dependent code when you have the dependencies.

Please read through this entire question so that you understand better what it is you are trying to do, and then decide which action to take.

Answer 2

setTimeout() takes a function, then the delay:

setTimeout(function() {
    $("#line2").attr("id","line1");
    $("#H1").attr("id","two");
}, 3000);

Note that setTimeout() delays what's inside this function. setTimeout() does not block the execution of the rest of your code, so the following code would do exactly what console.log() says:

console.log("I log first!");
setTimeout(function() {
    console.log("I log third!");
},1000);
console.log("I log second!");