JavaScript实现Sleep效果

---

一、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 + ms
    while(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);
})