JavaScript 如何添加sleep/wait功能

JavaScript与其他语言不同，没有模拟sleep()函数的方法。可以使用一些方法模拟sleep函数。

方法1：使用无限循环来持续检查经过的时间

首先通过new Date().getTime()方法找到sleep函数开始的时间。该方法返回自纪元时间以来经过的毫秒数。然后开始一个无限while循环。通过从当前时间减去开始时间来计算经过的时间。if语句检查经过的时间是否大于给定的时间（以毫秒为单位）。满足条件时，执行break语句，跳出循环。现在sleep函数结束，之后写的代码将执行。这种使用无限循环的sleep函数会暂停脚本的其余处理，并可能导致浏览器报警。不鼓励使用这种长时间的sleep函数。

语法：

function sleep(milliseconds) {
    let timeStart = new Date().getTime();
        while (true) {
        let elapsedTime = new Date().getTime() - timeStart;
        if (elapsedTime > milliseconds) {
        break;
        }
    }
}

示例：

<h1 style="color: green">GeeksforGeeks</h1> 
<b>JavaScript | sleep/wait before continuing</b> 
<p> 
    A sleep of 5000 milliseconds is simulated. 
    Check the console for the output. 
</p> 
<script> 
    function sleep(milliseconds) { 
        let timeStart = new Date().getTime(); 
        while (true) { 
            let elapsedTime = new Date().getTime() - timeStart; 
            if (elapsedTime > milliseconds) { 
                break; 
            } 
        } 
    } 
      
    console.log("Hello World"); 
    console.log("Sleeping for 5000 milliseconds"); 
      
    // sleep for 5000 miliiseconds 
    sleep(5000); 
      
    console.log("Sleep completed successfully"); 
</script>

输出:

JavaScript 如何添加sleep/wait功能

方法2：创建一个新的Promise并使用then()方法

创建一个包含setTimeout()函数的新Promise。setTimeout()函数用于在指定的时间后执行一个函数。在setTimeout()函数中使用Promise的已解决状态来在超时后完成它。then()方法可以在Promise完成后执行所需的函数。这样可以模拟一个函数的等待时间。这种方法不会阻塞JavaScript的异步特性，并且是延迟函数的首选方法。由于使用了Promise，该方法只在ES6标准中得到支持。

语法:

const sleep = milliseconds => {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
};

sleep(timeToSleep).then(() => {
    // code to execute after sleep
});

示例：

<h1 style="color: green">GeeksforGeeks</h1> 
<b>JavaScript | sleep/wait before continuing</b> 
<p> 
    A sleep of 5000 milliseconds is 
    simulated. Check the console for the output. 
</p> 
<script> 
    const sleep = milliseconds => { 
        return new Promise(resolve => setTimeout(resolve, milliseconds)); 
    }; 
      
    console.log("Hello World"); 
    console.log("Sleeping for 5000 milliseconds"); 
      
    // sleep for 5000 miliiseconds and then execute function 
    sleep(5000).then(() => { 
        console.log("Sleep completed successfully"); 
    }); 
</script>

输出：

JavaScript 如何添加sleep/wait功能