JavaScript实现sleep睡眠函数的几种简单方法总结

 更新时间:2023年01月05日 11:24:14   作者:谢向晚  
sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果,下面这篇文章主要给大家介绍了关于JavaScript实现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

附:还有一种死循环写法(参考自网络)

思路是利用系统时间,一旦没有运行到自己设定的时间就让程序一直在循环里计算(个人感觉实现简单,实际运行可能有点恐怖)

function sleep(numberMillis) { 
    //记录当前时间
    var now = new Date(); 
    //设置未来的某个时间
    var exitTime = now.getTime() + numberMillis; 
    while (true) { 
        //获取当前时间
        now = new Date(); 
        //检查是否到了设置好的未来时间
        if (now.getTime() > exitTime) 
        return; 
    } 
}

总结

到此这篇关于JavaScript实现sleep睡眠函数的几种简单方法总结的文章就介绍到这了,更多相关JS实现sleep睡眠函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • JS数组操作大全对象数组根据某个相同的字段分组

    JS数组操作大全对象数组根据某个相同的字段分组

    这篇文章主要介绍了JS数组操作大全对象数组根据某个相同的字段分组,需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JS获取当前页面名称的简单实例

    JS获取当前页面名称的简单实例

    下面小编就为大家带来一篇JS获取当前页面名称的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块,需要的朋友可以参考下。
    2011-01-01
  • 10大Js图像处理库

    10大Js图像处理库

    这篇文章主要介绍了10大Js图像处理库,对图像处理感兴趣的同学,可以参考下
    2021-04-04
  • 用原生JS实现简单的多选框功能

    用原生JS实现简单的多选框功能

    这篇文章主要介绍了用原生JS实现简单的多选框功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • javascript oop开发滑动(slide)菜单控件

    javascript oop开发滑动(slide)菜单控件

    这里因为是演示所以让HTML CSS尽量的简化,另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。
    2010-08-08
  • js中Map和Set的用法及区别实例详解

    js中Map和Set的用法及区别实例详解

    map和set一样是关联式容器,它们的底层容器都是红黑树,区别就在于map的值不作为键,键和值是分开的,下面这篇文章主要给大家介绍了关于js中Map和Set的用法及区别的相关资料,需要的朋友可以参考下
    2022-02-02
  • js截取小数点后几位的写法

    js截取小数点后几位的写法

    截取小数点后几位的方法有很多,下面为大家介绍下使用js是如何实现的
    2013-11-11
  • canvas实现粒子时钟效果

    canvas实现粒子时钟效果

    本文将使用canvas实现粒子时钟效果,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript实现汉字转拼音代码分享

    javascript实现汉字转拼音代码分享

    这篇文章主要介绍了javascript实现汉字转拼音代码分享,非常的实用,从项目中分离出来的,这里分享给大家,有需要的小伙伴可以参考下。
    2015-04-04

最新评论