从 Promise、Async/Await 、Generator等角度实现一个 sleep 函数

经常有业务需求,要等几秒才进行下一步操作。还可以进行防抖节流。

一、传统方法,回调函数

// 利用回调函数
function sleep(callback,time) {
  if(typeof callback === 'function') {
     setTimeout(callback,time)
  }
 }
function output(){
    console.log(1);
}
sleep(output,1000);
复制代码

二、从Promise方面进行实现

// Promise
const sleep = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  })
}

sleep(5000).then(() => {
    console.log('业务代码') 
})
复制代码

三、从async/await进行实现

const sleep = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  })
}
async function sleepAsync () {
    await sleep(5000);
    console.log('业务代码')
}
sleepAsync()
复制代码

四、从Generator 配合yield进行实现

//Generator
const sleep = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  })
}
function* sleepGenerator(time) {
    yield sleep(time);
}
sleepGenerator(5000).next().value.then(()=>{
    console.log('业务代码')
})
复制代码
### JavaScript 中实现 Sleep 功能 在 JavaScript 中,由于其单线程特性和事件循环机制,并未直接提供 `sleep` 函数。然而,可以通过异步编程的方式模拟这一行为。以下是几种常见的实现方式: #### 方法一:基于 Promise 和 `setTimeout` 通过返回一个 `Promise` 对象并结合 `setTimeout` 来实现延迟效果[^3]。 ```javascript const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // 使用示例 const greet = async () => { console.log('即将睡眠 300 毫秒'); await sleep(300); console.log('唤醒后输出'); }; greet(); ``` 此方法利用了 ES6 的 `async/await` 特性来简化异步代码的书写风格,使代码更易读且接近同步逻辑[^4]。 #### 方法二:传统回调函数形式 如果不想使用现代语法(如 `async/await`),也可以采用传统的回调模式[^1]。 ```javascript function sleep(callback, delay) { setTimeout(() => callback(), delay); } console.log('开始'); sleep(() => { console.log('经过 1 秒后的输出'); }, 1000); console.log('结束'); ``` 需要注意的是,在这种情况下,“结束”的日志会先于延时部分打印出来,因为 `setTimeout` 并不会阻塞主线程执行流程[^2]。 #### 方法三:结合 Generator 函数与自定义调度器 对于更加复杂的场景或者希望探索不同技术栈的同学来说,还可以尝试 generator 函数配合手动迭代器完成类似的功能[^4]。 ```javascript function* createGenerator() { yield sleep(500); console.log("第一次暂停"); yield sleep(700); console.log("第二次暂停"); } function run(gen) { const g = gen(); function next(value){ let result = g.next(value); if (!result.done){ result.value.then(function(val){next(val)}); } } next(); } run(createGenerator); // 定义通用版 sleep 返回 promise const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)); ``` 以上三种方案各有优劣,开发者可以根据实际需求选择最适合的一种或多种组合应用到项目当中去。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值