本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
本文向大家介绍Python函数装饰器常见使用方法实例详解,包括了Python函数装饰器常见使用方法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python函数装饰器常见使用方法。分享给大家供大家参考,具体如下: 一、装饰器 首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所以我们应该遵循开放封闭的原则。 也就是说:我们必须找
本文向大家介绍JavaScript Sleep()函数?,包括了JavaScript Sleep()函数?的使用技巧和注意事项,需要的朋友参考一下 睡觉() 借助Sleep(),我们可以使函数在固定的时间内暂停执行。在诸如C和Php的 编程语言中,我们将其称为sleep(sec)。Java有 Thread.sleep()方法,Python已经time.sleep()和GO 具有time.Sleep
本文向大家介绍JavaScript的各种常见函数定义方法,包括了JavaScript的各种常见函数定义方法的使用技巧和注意事项,需要的朋友参考一下 本文详细讲述了JavaScript的各种常见函数定义方法,分享给大家供大家参考。具体分析如下: 首先看一下JavaScript最常见的四种函数定义: 用Function构造函数定义的函数,代码如下: 函数声明,这种方式也是最为常见的一种: 函数表达式,
本文向大家介绍python 常见字符串与函数的用法详解,包括了python 常见字符串与函数的用法详解的使用技巧和注意事项,需要的朋友参考一下 strip去除空格 大小写 位置和比较 分隔和连接 常用判断 函数 函数定义与默认参数 可变参数 关键字参数 命名关键字参数 复杂情况 函数可以作为参数 递归 把一个大问题分解成同样结构的小问题, 然后利用小问题的解得出大问题的解 总结 以上所述是小编给大
本文向大家介绍详解javascript获取url信息的常见方法,包括了详解javascript获取url信息的常见方法的使用技巧和注意事项,需要的朋友参考一下 先以“http://www.cnblogs.com/wuxibolgs329/p/6188619.html#flag?test=12345”为例,然后获得它的各个组成部分。 1、获取页面完整的url 2、获取页面的域名 3、获取url协议
Array中的方法 操作方法 array.concat(item...)方法 concat方法产生一个新的数组,它包含array的副本并把一个或多个item参数拼接在array副本后面。也就是说,它所产生的数组只是一个array的副本与拼接item参数的数组。其中,item参数可以是一个任何定义了的数组、字符串。 concat方法不能改变原数组(array)。 var a = ["a", "b"