javascript

<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>

javascript sleep的多种方式：

1、基于循环实现sleep；

// 使用while循环function sleep(delay) {    var start = new Date().getTime();    while (new Date().getTime() - start < delay) {        continue;    }} console.log(1, new Date().getTime())  // 1 1631671203441sleep(2000)console.log(2, new Date().getTime())  // 2 1631671205441

// 使用for循环function sleep(delay) {    for (var start = Date.now();  Date.now() - start<= delay;);} console.log(1, new Date().getTime()) // 1 1631671672290sleep(2000)console.log(2, new Date().getTime()) // 2 1631671674290

优点：简单粗暴，通俗易懂。

缺点：以上的代码不会让线程休眠，而是通过高负荷计算使cpu无暇处理其他任务。这样做的缺点是在sleep的过程中其他所有的任务都会被暂停，包括dom的渲染。所以sleep的过程中程序会处于假死状态，并不会去执行其他任务

2、基于Promise实现sleep；

// 使用promisefunction sleep(delay) {    return new Promise(resolve =>        setTimeout(resolve, delay)    )} console.log(1, new Date().getTime())     // 1 1631672405810sleep(2000).then(() => {    console.log(2, new Date().getTime()) // 2 1631672407810})

优点：这种方式实际上是用了 setTimeout，没有形成进程阻塞，不会造成性能和负载问题。

缺点：虽然不像 callback 套那么多层，但仍不怎么美观，而且当我们需要在某过程中需要停止执行（或者在中途返回了错误的值），还必须得层层判断后跳出，非常麻烦，而且这种异步并不是那么彻底，还是看起来别扭。

3、基于generate实现sleep；

// 使用Generatorfunction* sleep(delay) {    yield new Promise(function (resolve, reject) {        setTimeout(resolve, delay);    })} console.log(1, new Date().getTime())     // 1 1631673104689sleep(2000).next().value.then(() => {    console.log(2, new Date().getTime()) // 2 1631673106689})

优点：同 Promise 优点，另外代码就变得非常简单干净

缺点：但不足也很明显，就是每次都要执行 next() 显得很麻烦，虽然有co（第三方包）可以解决，但就多包了一层不好看，错误也必须按co的逻辑来处理不爽。

4、基于 Async/Await 实现sleep；

// 使用async/awaitfunction sleep(delay) {    return new Promise((resolve) => setTimeout(resolve, delay));}async function test() {    console.log(1, new Date().getTime()) // 1 1631686674068    await sleep(2000);    console.log(2, new Date().getTime()) // 2 1631686676068}test();

优点：同 Promise 和 Generator 优点。 Async/Await 可以看做是 Generator 的语法糖，Async 和 Await 相较于 * 和 yield 更加语义，另外各个函数都是扁平的，不会产生多余的嵌套，代码更加清爽易读。

缺点： ES7 语法存在兼容性问题，但有 babel 一切兼容性都不是问题

5、使用npm上的node-sleep包

// 引入sleep包var sleep = require('sleep');console.log('1');sleep.sleep(2); //休眠2秒钟console.log('2');sleep.msleep(2000); //休眠2000毫秒 = 2秒console.log('3');sleep.usleep(2000000) //休眠2000000微秒 = 2秒console.log('4');

优点：能够实现更加精细的时间精确度，而且看起来就是真的 sleep 函数，清晰直白。

缺点：需要安装这个模块

以上就是小编今天的分享，希望可以帮助到大家。