【面试题】写一个睡眠函数

题目要求

请你编写一个异步函数,它接收一个正整数参数 millis ,并休眠 millis 毫秒。要求此函数可以解析任何值。

示例 1:

输入:millis = 100

输出:100

解释:

在 100ms 后此异步函数执行完时返回一个 Promise 对象

let t = Date.now();

sleep(100).then(() => {

console.log(Date.now() - t); // 100

});

示例 2:

输入:millis = 200

输出:200

解释:在 200ms 后函数执行完时返回一个 Promise 对象

方法 1:使用 Promises 和 setTimeout 的异步编程

概述

在 JavaScript 中,通常使用承诺来处理异步操作。承诺表示一个值,该值可能还不可用,但将在将来的某个时候解决(或在出错的情况下拒绝)。要在 JavaScript 中模拟延迟或"休眠",我们可以使用 setTimeout 函数,该函数将一个函数调度为在一段时间后运行。

该任务要求我们创建一个休眠指定毫秒的异步函数。要实现这一点,我们可以将 promises 与 setTimeout 结合起来。我们将返回在指定延迟后解决的承诺。

算法步骤

  1. 定义一个名为 sleep(millis) 的异步函数。此函数在解析之前将暂停执行 millis 毫秒。
  2. 在该函数内部,构造一个新的 promise 对象。这个 promise 对象的 executor 函数是我们将合并延迟的地方。
  3. 在 executor 函数中,使用 setTimeout 方法。setTimeout 是由主机环境(Web 浏览器、Node.js等)提供的方法。它在指定的延迟后执行提供的函数或代码段。
  4. 将 setTimeout 的延迟设置为 millis 毫秒。延迟后执行的代码将是 promise 的 resolve 方法。
  5. 当调用 resolve 方法时,它会将承诺标记为已实现,从而允许执行任何附加的 .then 处理程序。

实现

javascript 复制代码
async function sleep(millis) {
  return new Promise(resolve => {
    setTimeout(resolve, millis);
  });
}

在此实现中,sleep 函数是返回 promise 的异步函数。promise 的 executor 函数使用 setTimeout 在 millis 毫秒后解析 promise。请注意,我们实际上并不需要将睡眠功能设置为异步,因为我们直接返回一个 promise,但将其标记为 async 并不会有什么坏处。

你可以像这样在你的代码中使用 sleep 函数:

javascript 复制代码
let t = Date.now();
sleep(100).then(() => {
    console.log(Date.now() - t); // 大约 100
});

在这种用法中,我们记录当前时间,调用 sleep 函数,然后记录 promise 解析时经过的时间。运行时间应该大致等于 sleep 的输入,这表明函数确实已经"休眠"了指定的时间量。

请注意,使用 return new Promise() 或 return await new Promise() 都会在异步函数中产生相同的结果,如概述部分所述。

此外,使用 try {} catch(){} 也是异步编程中的一种常见做法,因为它允许您处理可能引发的任何潜在异常。在下面的解决方案中,如果在 setTimeout 函数的执行过程中出现错误,则 promise 被拒绝,并抛出错误:

javascript 复制代码
async function sleep(millis) {
  return new Promise((res,rej) => {
    try {
      setTimeout(() => res(5), millis)
    } catch(err) {
      rej(err)
    }
  })
}

方法 2:使用 Promises 和 setTimeout 不带返回的异步编程

这种方法与第一种方法类似,但略有不同:对于这个问题,您不需要显式返回任何内容。这也使以下代码成为有效的解决方案。此版本的 sleep 函数不返回任何内容(或者更准确地说,它返回 undefined),因为没有返回语句。但由于问题陈述说,"它可以求解任何值",这是完全可以接受的。这也是一个非常有效的俏皮话。

实现

javascript 复制代码
async function sleep(milliseconds) {
	await new Promise(res => setTimeout(res, milliseconds)); 
}
相关推荐
逛逛GitHub14 小时前
这个牛逼的股票市场平台,在 GitHub 上开源了。
前端·github
细节控菜鸡14 小时前
【排查实录】Web 页面能打开,服务器能通接口,客户端却访问失败?原因全在这!
运维·服务器·前端
duandashuaige14 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗14 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
时雨__15 小时前
利用AndVX6开发流程图——问题总结
前端
渣哥15 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖15 小时前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_15 小时前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
春秋半夏15 小时前
vue2二次封装el-select支持collapse-tags-tooltip
前端