javascript使⽤sleep函数的常见⽅法详解本⽂实例讲述了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;
}
}
}
jquery是什么有什么作用
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.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的六种简单实现。欢迎⼤家指出问题，我们⼀起进步。
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。