Sleep in javascript

Question

I'm trying to create something like slide show that is moved automatically after a delay. I don't really understand how promises work so I find myself unable to create the sleep functinon. Any solutions?

const startBtn = document.querySelector('.startBtn');
const box = document.querySelector('.box')

startBtn.addEventListener('click', () => {
    for(var i = 1; i <= 20;i++){
        //sleep(60000);  <= the problem
        box.style.transform = 'translateY(' + (-i * 100) + 'vh)';
    }
});

Does this answer your question? [What is the JavaScript version of sleep()?](https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep) — HeySora, Aug 31 '20 at 09:25

score 0 · Accepted Answer · answered Aug 31 '20 at 09:27

0

Easiest you can do is use setTimeout:

setTimeout(function(){ alert("Hello"); }, 3000);

See: https://www.w3schools.com/jsref/met_win_settimeout.asp

Maybe you'll want to consider setInterval instead for your problem. In both cases you have to rework your solution a bit, the for loop won't help you much.

answered Aug 31 '20 at 09:27

nsndvd

770
7
21

Doesn't work for me. Whole for loop was executed and then came alerts. – Rentib Aug 31 '20 at 10:10

Liu Lei · Answer 2 · 2020-08-31T10:33:42.793

0

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

const fn = async () =>{
    let pre = new Date()
    console.log(pre);
    await sleep(2000);
    let after = new Date();
    console.log(after - pre);
}



startBtn.addEventListener('click', async() => {
    for(var i = 1; i <= 20;i++){
       // sleep i*1000 seconds
       await sleep(i* 1000);
       box.style.transform = 'translateY(' + (-i * 100) + 'vh)';
    }
});

edited Aug 31 '20 at 10:33

answered Aug 31 '20 at 09:51

Liu Lei

1,063
1
7
9

Whole loop was executed without any delay. – Rentib Aug 31 '20 at 10:16
actually you can't sleep a loop. I update my answer, you can try it again – Liu Lei Aug 31 '20 at 10:34

Sleep in javascript

2 Answers2