Javascript 中 sleep 函数实现


Javascript 中并没有 built-in 的 sleep 函数支持, 在 async/await/Promise 的支持之前, 我们可以用 busy-waiting 的方式来模拟:

1
2
3
4
function sleep( milliseconds ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + milliseconds ){ /* do nothing */ } 
}
function sleep( milliseconds ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + milliseconds ){ /* do nothing */ } 
}

不过这代码只适合用来调试, 因为实际上, CPU会进入一个阻塞的等待, 非常不环保. 在 async/wait/Promise 的支持下, Javascript 是可以通过以下代码来实现异步(非阻塞)的等待方式的:

1
2
3
4
5
async function sleep(milliseconds) {
  return new Promise(resolve => {
    setTimeout(resolve, milliseconds);
  })
}
async function sleep(milliseconds) {
  return new Promise(resolve => {
    setTimeout(resolve, milliseconds);
  })
}

更为简短的实现方式:

1
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

使用方法如下, 通过异步的方式显示1到5, 并且间隔1秒:

1
2
3
4
5
6
async function print() {
  for(let i = 1; i >= 5; i++) {
    console.log(i);
    await sleep(1000)
  }
}
async function print() {
  for(let i = 1; i >= 5; i++) {
    console.log(i);
    await sleep(1000)
  }
}

我们可以用Promise的方式来递归调用:

1
2
3
4
5
6
7
8
9
10
11
function one2FiveInPromise() {
  function logAndSleep(i) {
    console.log(i);
    if (i === 5) {
      return;
    }
    return sleep(1000).then(() => logAndSleep(i + 1));
  }
 
  logAndSleep(1);
}
function one2FiveInPromise() {
  function logAndSleep(i) {
    console.log(i);
    if (i === 5) {
      return;
    }
    return sleep(1000).then(() => logAndSleep(i + 1));
  }

  logAndSleep(1);
}

是不是很好用? 不过这和 Thread.sleep() 方法还是有点区别的, 毕竟 Thread.sleep 还是同步的, 而我们这里实现的是异步 sleep, 准确的来说是异步延时调用代码的一种方法.

参考: https://github.com/n0ruSh/blogs/issues/27

GD Star Rating
loading...
本文一共 187 个汉字, 你数一下对不对.
Javascript 中 sleep 函数实现. (AMP 移动加速版本)
上一篇: 剑桥GE公司每年一度的5人慈善足球联赛
下一篇: 二叉树判断表兄弟表兄妹算法(递归, 深度优先)

扫描二维码,分享本文到微信朋友圈
fa570b47bf96cac1f8852486b34798cf Javascript 中 sleep 函数实现 I.T. 学习笔记 程序设计

评论