目录前言
1.目标分析
2.setTimeout 封装3.Promise 封装
4.async/await
总结前言我们都是JavaScript是一个单线程语言，单线程有它的好处也有它的坏处。在我们熟知的如Java、C++等语言中，都提供了一个叫做Sleep的内置函数。这个函数的作用就和它的名字一样：睡眠。
假设我们有这样一个场景：我们需要在项目运行起来后的十分钟之后去执行一段代码，这段代码可以是符合你业务场景的任何代码，比如查看内存占用多少等等。
在Java这类语言中，可以直接使用Sleep这个内置函数实现这个需求，Sleep函数会让出或者停下当前线程，让其它程序先执行，到底指定时间后在继续执行。
然而我们的JavaScript没有提供sleep内置函数，大致就是因为单线程的原因把！所以说我们可以尝试着自己封装一个！
1.目标分析
既然我们要去实现一个sleep函数，那么我们肯定要先有一个比较实际的场景，这样才好开展工作。
假设我们有如下一段代码：
上段代码非常简单，我们的目的就是为了让它们几个分别间隔1秒打印，需求非常简单，实现起来也很容易，可能有些小伙伴直接想到了setTimeout。
确实，setTimeout可以实现我们的需求，比如下面的代码：setTimeout(fnA, 1000);setTimeout(fnB, 2000);setTimeout(fnC, 3000);定时器确实可以满足我们的需求，但是如果项目中到处些定时器的可能会让人很疑惑，所以我们有必要进行封装，写一个自己的sleep函数，大家多看几种实现方式应该就会豁然开朗了。
2.setTimeout 封装这是大家最容易想到也是最暴力的一种方式，毕竟一提到延时执行大家都会想到定时器，所我们直接利用setTimeout的这个特性来实现我们的sleep函数。
代码如下：
这是最原始的一种方式，其实本质就是定时器，只不过我们封装成一个函数罢了。
这种实现方式有如下优缺点：
优点：
简单易实现，兼容性好，毕竟只是用了setTimeout，而且非常好理解。
缺点：
我们需要传入回调函数的方式进去，如果函数里面有多回调函数可能不太好理解。另外一点就是它不会阻塞同步任务，比如下面代码的输出结果：sleep(fnA, 1000);console.log('E');sleep(fnB, 2000);console.log('G');sleep(fnC, 3000);
输出结果：
在有些场景下我们可能需要sleep函数会阻塞代码，依次执行，这个时候这种封装就满足不了了。
3.Promise 封装promise是ES6提出的一种异步解决方案，它和setTimeout一样，都可以实现异步，区别在于promise解决了回调函数的问题，它可以实现链式调用，我们可以接触promise来实现sleep函数。
代码如下：
上段代码中利用promise实现了sleep函数，其实是promise和setTimeout的结合，不过上段代码中我们可以进行链式调用了，不必再往sleep函数中传入回调函数了。
优点：
不用再传入回调函数，采用链式调用。
缺点：
仍未解决阻塞问题，依然会先执行同步任务，代码如下：sleep(1000).then(fnA); // 1 秒后输出 A console.log('E');sleep(2000).then(fnB); // 2 秒后输出 B console.log('G');sleep(3000).then(fnC); // 3 秒后输出 C
输出结果：
4.async/await
前面两个封装中我们一直提及阻塞问题，那么既然我们使用了promise，我们就很有必要将async/await拿出来使用，它们可以完美的阻塞我们的代码，然我们的代码依次执行。
代码如下：
输出结果：
上段代码中我们封装的sleep函数并没有改变，只是我们调用sleep函数的使用采用了async/await的方式调用，这就很好的解决了我们程序没有阻塞的额问题了。
总结实现sleep函数其实非常简单，主要是理解JavaScript中异步执行情况。虽然上面的代码中使用await sleep()的方式看起来最像一个真正的sleep函数，但是凡事都有两面性，比如我们有些场景只是需要一定时间后执行某个函数，不想阻塞代码的执行，这个时候setTimeout和promise都是非常好的选择，但有时候我们就是需要阻塞代码的执行，比如后面的代码用到了前面这个函数的返回结果，这个时候async/await就是一个很好的选择了。
到此这篇关于使用JS实现一个Sleep函数的文章就介绍到这了,更多相关js Sleep函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:JavaScript实现Sleep函数的代码javascript实现的像java、c#之类的sleep暂停的函数代码javascript 使用sleep函数的常见方法详解JavaScript sleep睡眠函数的使用JavaScript实现sleep睡眠函数的几种简单方法总结JavaScript中实现Sleep功能及其应用的几种方法