【Sleep】JavaScript有什么方法可以实现sleep睡眠函数

🦩学习一下什么是sleep函数以及怎么实现sleep

什么是sleep函数

sleep函数的作用是让线程休眠，等到指定时间再重新唤起，起到延时的效果。
由于Javascript是单线程的，没有内置的sleep函数，所以要使用一些方法来模拟。

实现sleep

1. 利用Date

通过伪死循环来阻止代码执行

function sleep(time) {
  const beginTime = new Date().getTime()
  const endTime = beginTime + time
  while(true) {
    if (new Date().getTime() > endTime) {
      return
    }
  }
}

console.time('runTime')
sleep(1000)
console.log(1); // 1s后输出
sleep(3000)
console.log(2); // 3s后输出

缺点：
以上代码不会让线程休眠，而是通过高负荷计算使CPU无暇处理其他任务；
这样会导致sleep过程中其他所有的任务都被暂停，包括DOM的渲染。

2. 使用setTimeout

function sleep(callback, delay) {
  setTimeout(callback, delay);
}

sleep(() => {
  console.log(1);
}, 1000)

3. 基于Promise

function sleep(delay) {
  return new Promise(resolve => {
    setTimeout(resolve, delay);
  })
}

sleep(1000).then(() => {
  console.log('3-1');
})

方法2和方法3如果有多个sleep只能嵌套，如:

// 方法2
sleep(() => {
  console.log(1);

  sleep(() => {
    console.log(2);
  }, 2000)
}, 1000)

// 方法3
sleep(1000).then(() => {
  console.log('3-1');

  sleep(2000).then(() => {
    console.log('3-2');
  })
})

4. 基于Generator函数

function* sleep(delay) {
  yield new Promise(resolve => {
    setTimeout(resolve, delay);
  })
}

sleep(2000).next().value.then(() => {
  console.log('4-1');
  sleep(1000).next().value.then(() => {
    console.log('4-2');
  })
})

5. 使用async/await

使用async/await可以实现多个sleep不用嵌套调用

function sleep(delay) {
  return new Promise(resolve => {
    setTimeout(resolve, delay)
  })
}

async function run () {
  console.log('5-1');
  await sleep(1000)
  console.log('5-2');
  await sleep(2000)
  console.log('5-3');
}
run()