JavaScript中实现sleep睡眠函数的几种简单方法
目录
一.什么是sleep函数?
二.为什么使用sleep?
三.实现sleep
一.什么是sleep函数?
sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果。
官方介绍:sleep是一种函数,作用是延时,程序暂停若干时间,在执行时要抛出一个中断异常,必须对其进行捕获并处理才可以使用这个函数。
例如:
console.log('1');
sleep(2000);
console.log('2');
控制台输出数字1后 会间隔2秒后输出数字2
当然上面的代码是不能执行的,因为js中是没有sleep方法的。
所以这一篇文章主要介绍几种在js中实现sleep的方式。
二.为什么使用sleep?
看到这里有人会问了,为什么要使用sleep,上面的例子我可以使用setTimeout来实现啊?
因为setTimeout是通过回调函数来实现定时任务的,所以在多任务的场景下就会出现回调嵌套:
console.time('runTime:');setTimeout(() => {console.log('1');setTimeout(() => {console.log('2')setTimeout(() => {console.log('3')console.timeEnd('runTime:');}, 2000);}, 3000);}, 2000);
//结果:
//1
//2
//3
//runTime:: 7017.87890625 ms
上面的方式存在回调嵌套的问题,我们希望可以利用sleep函数更方便优雅地实现上面的例子。
三.实现sleep
接下来我们就分别用几种不同的方法来实现下sleep方法:
基于Date实现
通过死循环来阻止代码执行,同时不停比对是否超时。
function sleep(time){var timeStamp = new Date().getTime();var endTime = timeStamp + time;while(true){if (new Date().getTime() > endTime){return;} } } console.time('runTime:'); sleep(2000); console.log('1'); sleep(3000); console.log('2'); sleep(2000); console.log('3'); console.timeEnd('runTime:'); // 1 // 2 // 3 // runTime:: 7004.301ms
缺点:
以上的代码不会让线程休眠,而是通过高负荷计算使cpu无暇处理其他任务。
这样做的缺点是在sleep的过程中其他所有的任务都会被暂停,包括dom的渲染。
所以sleep的过程中程序会处于假死状态,并不会去执行其他任务
基于Promise的sleep
单纯的Promise只是将之前的纵向嵌套改为了横向嵌套:
function sleep(time){return new Promise(function(resolve){setTimeout(resolve, time);}); } console.time('runTime:'); console.log('1'); sleep(1000).then(function(){console.log('2');sleep(2000).then(function(){console.log('3');console.timeEnd('runTime:');}); }); console.log('a'); // 1 // a // 2 // 3 // runTime:: 3013.476ms
这其实和之前的setTimeout嵌套没什么区别,也很难看。
我们再次进行优化,使用ES6的Generator函数来改写上面的例子
基于Generator函数的sleep
我们对sleep的执行使用Generator函数来执行,并且搭配co来进行自执行。
var co = require('co');function sleep(time){return new Promise(function(resolve){setTimeout(resolve, time);}); }var run = function* (){console.time('runTime:');console.log('1');yield sleep(2000);console.log('2');yield sleep(1000);console.log('3'); console.timeEnd('runTime:'); }co(run); console.log('a'); // 1 // a // 2 // 3 // runTime:: 3004.935ms
可以看到整体的代码看起来不存在嵌套的关系,并且执行过程不会发生假死情况,不会阻塞其他任务的执行。
但是多了一个co执行器的引用,所以还是有瑕疵。
基于async函数的sleep
async函数最大的特点就是自带执行器,所以我们可以不借助co来实现sleep了
function sleep(time){return new Promise((resolve) => setTimeout(resolve, time)); }async function run(){console.time('runTime:');console.log('1');await sleep(2000);console.log('2');await sleep(1000);console.log('3'); console.timeEnd('runTime:'); }run(); console.log('a');// 1 // a // 2 // 3 // runTime:: 3009.984ms
JavaScript中实现sleep睡眠函数的几种简单方法相关推荐
- JavaScript中的立即执行函数
原文链接 通常我们声明一个函数有以下几种方式: // 声明函数f1 function f1() {console.log("f1"); } // 通过()来调用此函数 f1();/ ...
- 有没有更好的方法在JavaScript中执行可选的函数参数? [重复]
本文翻译自:Is there a better way to do optional function parameters in JavaScript? [duplicate] This quest ...
- JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
- c语言中用于获取字符串长度的函数是,C语言中求字符串长度的函数的几种实现方法...
C语言中求字符串长度的函数的几种实现方法 1.最常用的方法是创建一个计数器,判断是否遇到'\0',不是'\0'指针就往后加一. int my_strlen(const char *str) { ass ...
- java调用javascript函数_[Java教程]JavaScript函数的4种调用方法详解
[Java教程]JavaScript函数的4种调用方法详解 0 2016-08-09 00:00:12 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C# ...
- c++STL中的find()函数 有两种使用方法
c++STL中的find()函数 有两种使用方法 方法一: 开头引头文件:中的函数 其调用形式为 find(start,end,value) start搜寻的起点,end搜寻的终点,要寻找的value ...
- Python Lambda函数的几种使用方法
在进行编程时,一般我们会给一个函数或者变量起一个名字,该名称是用于引用或寻址函数变量.但是有一个低调的函数,你不需要赋予它名字,因此该函数也叫匿名函数.该函数就是Python中的Lambda函数,下面 ...
- java代码二进制转为十六进制_Java 中二进制转换成十六进制的两种实现方法
Java 中二进制转换成十六进制的两种实现方法 每个字节转成16进制,方法1 /** * 每个字节转成16进制,方法1 * * @param result */ private static Stri ...
- Springboot中关于跨域问题的一种解决方法
Springboot中关于跨域问题的一种解决方法 参考文章: (1)Springboot中关于跨域问题的一种解决方法 (2)https://www.cnblogs.com/zishu/p/107272 ...
最新文章
- 多个硬件体验如一,华为终端分布式技术会重构IoT生态吗?
- C. 防止E-mail注入
- 车联网 python_利用百度车联网提供的天气查询接口用python查询天气信息
- java-web的mybatis的学习
- python sorted下标_Python列表操作最全面总结
- (12)FPGA时钟设计原则
- Android下拉刷新上拉更多瀑布流(附源码)
- 面试官:select......for update会锁表还是锁行?
- CorelDRAWX4的VBA插件开发(十八)命令合并与一键多步撤销
- django for 前端_Django 前端Wbe框架
- cjson构建_cJSON结构体构建
- ZZCMS 2022版白盒审计
- 常用证件照照片规格(英寸) (厘米) (像素)
- 科学家被称为计算机之父,被称为“计算机之父”,他超前的思维揭开计算机处理信息的本质!...
- 测试udp端口通不通linux,windows Centos ubuntu debian等测试UDP端口协议的连通性
- WEB学习路线2020完整版+附视频教程
- ios html格式转换,如何使用HTML模版和iOS中的UIPrintPageRenderer来生成PDF文档
- HX711压力传感器学习(STM32)
- 使用自定义的评价函数优化高NA分束器
- 老男孩python 2018最新_2018最新老男孩全栈python第3期视频教程 完整版 附源码与笔记 | 52download...
热门文章
- VLC和WebRTC等开源库关于硬解软解的策略
- 安装rocon、kobuki、turtlebot
- 【学习笔记】High-level Semantic Feature Detection: A New Perspective for Pedestrian Detection/CSP
- 江哥带你玩转C语言 | 14 - 结构体-枚举-共用体
- UE4(虚幻4)拾取钥匙开门
- java紫砂壶交易购物系统 mysql
- labview 新建报表生成exe不能使用解决方法
- 苹果群控 ios手机免越狱一键打开一键同步操作
- 月结驾驶舱隐藏任务ID
- Sublime Text激活