在javascript中睡觉

Question

我正在尝试创建类似幻灯片放映的东西，在延迟之后会自动移动。我真的不明白承诺是如何工作的，所以我发现自己无法创造睡眠功能。有什么解决办法吗？

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)';
    }
});

Answer 1

最简单的方法是使用setTimeout：

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

请参阅：https://www.w3schools.com/jsref/met_win_settimeout.asp

也许您需要考虑setInterval来解决您的问题。在这两种情况下，您必须稍微修改解决方案，for循环不会对您有多大帮助。

Answer 2

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)';
    }
});