javascript 使用sleep函数的常见方法详解


Posted in Javascript onApril 26, 2020

本文实例讲述了javascript 使用sleep函数的常见方法。分享给大家供大家参考,具体如下:

一.什么是sleep函数?

花一点时间来聊一下sleep函数,首先什么是sleep函数?

sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果。

例如:

console.log('1');
sleep(5000);
console.log('2');

控制台输出数字1后会间隔5秒后输出数字2

当然上面的代码是不能执行的,因为js中是没有sleep方法的。

所以这一篇文章主要介绍几种在js中实现sleep的方式。

二.为什么使用sleep?

看到这里有人会问了,为什么要使用sleep,上面的例子我可以使用setTimeout来实现啊?

因为setTimeout是通过回调函数来实现定时任务的,所以在多任务的场景下就会出现回调嵌套:

console.time('runTime:');
setTimeout(function(){
 console.log('1')
 setTimeout(function(){
 console.log('2');
 setTimeout(function(){
  console.log('3');
  console.timeEnd('runTime:');
 }, 2000);
 }, 3000);
}, 2000);
// 1
// 2
// 3
// runTime:: 7013.104ms

上面的方式存在回调嵌套的问题,我们希望有一个优雅的方式来实现上面的例子:

sleep(2000);
console.log('1');
sleep(3000);
console.log('2');
sleep(2000);
console.log('3');
...

三.实现sleep

接下来我们就分别用几种不同的方法来实现下sleep方法

1.基于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的过程中程序会处于假死状态,并不会去执行其他任务

2.基于Promise的sleep

为了解决ajax的回调嵌套问题,在jQuery1.8之后支持了Promise。但是单纯的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函数来改写上面的例子

3.基于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执行器的引用,所以还是有瑕疵。

当然这不是最终版,因为ES7为我们带来了新的解决方案。

4.基于async函数的sleep

ES7新增了async函数,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

效果和之前的一样。

5.使用child_process(子进程)实现sleep函数

前面介绍了几种比较简单的sleep实现,接下来看一个比较难的实现。

原理是将sleep放在子进程中执行,不会影响其他进程,看代码:

var childProcess = require('child_process');
var nodeBin = process.argv[0];
 
function sleep(time) {
 childProcess.execFileSync(nodeBin, ['-e', 'setTimeout(function() {}, ' + time + ');']);
 // childProcess.spawnSync(nodeBin, ['-e', 'setTimeout(function() {}, ' + time + ');']);
}
 
console.time('runTime:');
console.log('1');
sleep(1000);
console.log('2');
sleep(2000);
console.log('3');
console.timeEnd('runTime:');
 
// 1
// 2
// 3
// runTime:: 3579.093ms

以上代码,是通过childProcess对象的execFileSync或者spawnSync创建一个同步进程,

在同步进程中执行定时器,定时器执行完毕后回收进程,程序继续执行。

6.使用npm sleep包

前面的内容都是我们自己实现的,其实npm上已经有很多相关的js包了。

我们来看看他们是怎么实现的,sleep

var sleep = require('sleep');
 
console.log('1');
console.time('runTime:');
sleep.sleep(2); //休眠2秒钟
console.log('2');
sleep.msleep(1000); //休眠1000毫秒
console.log('3');
sleep.usleep(1000000) //休眠1000000微秒 = 1秒
console.log('4');
console.timeEnd('runTime:');
 
// 1
// 2
// 3
// 4
// runTime:: 4014.455ms

很强有没有,sleep包是C++编写,然后扩展到Node来实现sleep函数
也是一个不错的选择。

以上就是sleep的六种简单实现。欢迎大家指出问题,我们一起进步。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JavaScript中this详解
Sep 01 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
Angular2 父子组件数据通信实例
Jun 22 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 #Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 #Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 #Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 #Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
You might like
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python如何制作缩略图
2019/04/30 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
int和Integer有什么区别
2013/05/25 面试题
奉献家乡演讲稿
2014/09/16 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
vue3中的组件间通信
2021/03/31 Vue.js