一、Sleep？

console.log(1);
sleep(1000) //暂停1秒
console.log(2);

在多线程语言中，sleep() 方法是让调用线程进入睡眠状态，让出执行机会给其他线程，等到休眠时间结束后，线程进入就绪状态和其他线程一起竞争cpu的执行时间。
而在JavaScript这样一个单线程语言里，js的设计者并没有设置sleep()这样的方法来暂停线程。

二、为什么使用sleep？

看到这里有人会问了，为什么要使用sleep，上面的例子我可以使用setTimeout来实现啊？
因为setTimeout是通过回调函数来实现定时任务的，所以在多任务的场景下就会出现回调嵌套：

setTimeout(function(){console.log('1')setTimeout(function(){console.log('2');setTimeout(function(){console.log('3');}, 2000);}, 3000);
}, 2000);
// 1
// 2
// 3

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

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

三、实现方法

1. 基于while + Date实现

//方法一 while循环方式
function sleep(ms) {let start = Date.now()let end = start + mswhile(true) {if(Date.now() > end) {return}   }
}
console.log(1);
sleep(1000)
console.log(2);

2. 基于Promise + setTimeout实现

//方法二 Promise
function sleep1(ms) {let temp = new Promise((resolve) => {console.log(111);setTimeout(resolve,ms);})return temp
}
sleep1(1000).then(() => {console.log(222);
})

JavaScript实现Sleep效果相关推荐

十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
JavaScript 省市级联效果
为什么80%的码农都做不了架构师?>>> JavaScript 省市级联效果 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...
用MVC来实现javaScript的时间效果
用MVC来实现javaScript的时间效果开发工具与关键技术: MVC javascript 作者:沈金凤年级:18级(5)班撰写日期:2019年2月11日除了再Html中写javaScri ...
JavaScript 图片切割效果（带拖放、缩放效果）
JavaScript 图片切割效果(带拖放.缩放效果) 转载于:https://www.cnblogs.com/xiaoluozi513/archive/2008/11/14/1333882.html
JavaScript 实现雪花效果
JavaScript 实现雪花效果一.实现功能二.展示 1.代码展示 2.效果展示总结一.实现功能 (1)添加一个背景图片: (2)用js语言实现雪花飘落效果: (3)使用setInterva ...
html如何添加时钟效果,五步轻松实现JavaScript HTML时钟效果
这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章学了一 ...
Javascript实现幻灯片效果
Web上很多页面都有提供javascript幻灯效果的代码库,我们可以免费直接使用很多优秀的代码库.今天我开始学习用JavaScript实现幻灯效果,新手一步一步开始学起. 在创建一个幻灯效果的时候, ...
JavaScript实现走马灯效果[无缝连接、循环滚动]
JavaScript实现走马灯效果[无缝连接.循环滚动] 无缝跑马灯效果以下代码在IE6.Firefox+Win2k环境下测试通过网页走马灯连续循环滚动一.向上的无缝循环滚动 HTML代码 &l ...

JavaScript实现Sleep效果

文章目录