来自推特上 Windows 故障分析的笑话 图片来源:me.me

推上看到的笑话,Windows 故障分析的实现。

然后想起来 JavaScript 中如何实现这个 sleep() 函数让代码暂停指定时间。

异步版本

借助 Promise 这事很好实现。

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

创建一个 Promise,等待指定时间后 resolve 掉即可。

但,Promise 是异步的,它要求后续代码要么包含在 then 里面,要么通过 async/await 来调用。

所以使用起来应该像这样子,

function testSleep() {console.log("will sleep for 1s");sleep(1000).then(() => {console.log("will sleep for another 5s");sleep(5000).then(() => {console.log("waked up");});});
}
testSleep();

或者这样子:

async function testSleep() {console.log("will sleep for 1s");await sleep(1000);console.log("will sleep for another 5s");await sleep(5000);console.log("waked up");
}
testSleep();

测试 sleep

当然后者会更加优雅些,但本质上都是需要保证后续代码在 Promise 回调中执行。如何有回调之外的代码,则不会被阻断,这便是其缺点。

async function testSleep() {console.log("will sleep for 1s");await sleep(1000);console.log("will sleep for another 5s");await sleep(5000);console.log("waked up");
}
testSleep();// ?不会按预期那样最后执行,而是立即被执行
console.log("我在等上面的代码执行完...");

代码未阻断的情况

同步版本

不借助异步异步代码想阻断代码执行,那其实可以让代码原地跑,通过 while

function syncSleep(time) {const start = new Date().getTime();while (new Date().getTime() - start < time) {}
}

使用起来就和正常函数没区别了,对周围代码也没有要求必需得在回调什么的:

console.log("start test sync sleep...");
syncSleep(3000);
console.log("sync sleep after 3s");

测试同步版本的 sleep

方便是方便,但不建议使用这种方式,毕竟代码在空跑。如果需要这样的场景,你需要考虑是否可以修改下代码或换个设计,异步能满足大部分需求。

相关资源

  • MDN - Promise
  • Synchronous and asynchronous requests
  • What is the JavaScript version of sleep()?

转载于:https://www.cnblogs.com/Wayou/p/javascript_sleep.html

JavaScript 中实现 sleep相关推荐

  1. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

  2. JavaScript中,this的绑定规则

    对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点. 比如下面的代码,this 指向就有三种方式. 在<你不知道的 JavaScript>一书中,我总算比较清 ...

  3. Javascript中undefined,NaN等特殊比较

    以下内容转自: http://blog.csdn.net/hongweigg/article/details/38090093 1.问题:在Javascript中,typeof(undefined) ...

  4. Javascript中二进制数据处理方法

    Javascript中二进制数据处理方法 转载于:https://www.cnblogs.com/motadou/archive/2012/02/19/2358514.html

  5. JavaScript 中的有限状态机

    http://www.ibm.com/developerworks/cn/web/wa-finitemach/ JavaScript 中的有限状态机 Page navigation 系列文章 有限状态 ...

  6. 在Javascript中使用面向对象的编程

    by Mike Koss March 26th, 2003 这是一篇,我个人认为最好的,Javascript面向对象编程的文章.翻译不好的地方,还望大家指正,谢谢. 如果您需要,可以访问下面的地址取得 ...

  7. 取出url中的字符_如何在JavaScript中解析URL:例如主机名,路径名,查询,哈希?...

    统一资源定位符(缩写URL)是对Web资源(网页,图像,文件)的引用.URL指定资源位置和检索资源的机制(http,ftp,mailto). 例如,这是此博客文章的URL: 通常,您需要访问URL的特 ...

  8. 在javascript中判断类型

    String 一个字符串始终是一个字符串,所以这一块是很容易.除非使用new(new String)调用,否则typeof将返回"object".所以也要包含那些可以使用的字符串i ...

  9. JavaScript中几个重要的知识点(1) ---- 面向对象

    JavaScript中几个最重要的大知识点 面向对象 DOM事件 异步交互ajax 面向对象 在JS中可以把任意的引用和变量都看成是一个对象.面向对象的主要三个表现形式: 封装 继承 多态 1. 封装 ...

  10. javascript中实例方法与类方法的区别

    在javascript中,类有静态属性和实例属性之分,也有静态方法和实例方法之分 类属性(静态属性):通过类直接访问,不需要声明类的实例来访问 类方法(静态方法):通过类直接访问,不需要声明类的实例来 ...

最新文章

  1. Tomcat下conf下server.xml的文件配置信息
  2. Android之给图片添加涂鸦(文字)
  3. QT多媒体 播放视频并显示字幕
  4. 大话Web-Audio-Api
  5. moodle升级完整过程
  6. libuv:多平台支持库-异步I / O
  7. 2019 renew 博客目录
  8. Win测试——使用Spy++获取窗口标题
  9. 读[SBO高层大变动]一文有感
  10. SD卡驱动-基础知识
  11. Prometheus+SpringBoot应用监控全过程详解
  12. Oracle 查询表空间及某个表的大小
  13. python作用域的理解-python中对变量的作用域LEGB、闭包、装饰器基本理解
  14. rhq监控软件_用RHQ监视怪物
  15. Java缓存知识汇总
  16. 详解 Python qrcode 二维码模块
  17. 微信公众号加入图灵机器人
  18. OSChina 周一乱弹 ——看见别人的工作台眼神都发光
  19. python基于cv2实现给一张图片增加边框
  20. [AJava]FusionCharts Free中文开发指南[使用文档教程]第十四章--在JSP里使用FCF

热门文章

  1. Delphi的对象机制浅探[转载]
  2. 【CyberSecurityLearning 32】Apache配置、Apache的访问控制设定、LAMP平台的搭建
  3. Java对象容器——集合Set
  4. Visual c++6.0 如何自定义一个光标,使其变成字
  5. 如何撤销正在审核的苹果app?
  6. Unity3D ShaderLab 菲涅耳内轮廓
  7. SpringBoot中请求映射的原理(源码)
  8. 解决layui数据表格table固定列行高不一致的情况
  9. STM32开发 -- 烧写/启动模式
  10. C语言再学习 -- 输入/输出