Adding a 2 seconds delay between javascript lines

Question

I want to animate something everytime I click on it. So I saved an animation in the class "animation".

function listClick() {
  toplist.classList.add("animation");
  toplist.classList.remove("animation");
}

the animation lasts 2000 ms so I want a delay of 2000 ms between those two lines of code in my function. How can I achieve this using Javascript?

Possible duplicate of [Put a Delay in Javascript](https://stackoverflow.com/questions/1183872/put-a-delay-in-javascript) — Abbe, Jul 08 '17 at 19:03

score 0 · Accepted Answer · answered Jul 08 '17 at 19:00

0

function listClick() {
     toplist.classList.add("animation");
     setTimeout(function() {
          toplist.classList.remove("animation");
     }, 2000);
}

answered Jul 08 '17 at 19:00

Kovi

138
1
1
9

I knew there was a function for this, I just couldn't find the name. Thanks a lot! – H0ndman2 Jul 08 '17 at 19:15

score 0 · Answer 2 · answered Jul 08 '17 at 19:00

0

You have the setTimeout(function(), timeoutInMilliSecs); you can throw in there and use.

answered Jul 08 '17 at 19:00

Subtractive

500
2
9
19

score 0 · Answer 3 · answered Jul 08 '17 at 19:02

Create a new function

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function listClick() {
    toplist.classList.add("animation");
    await sleep(2000);
    toplist.classList.remove("animation");
}

What is the JavaScript version of sleep()?

Adding a 2 seconds delay between javascript lines

3 Answers3