用Promise封装一个定时器

简介: 用Promise封装一个定时器

用Promise封装一个定时器函数,这个函数会在指定时间后 resolve,并返回设定的结果值。

下面是实现代码,这个封装的定时器可以像原生Promise一样使用then、catch和finally方法:

/**
 * 用Promise封装的定时器函数
 * @param {number} delay 延迟时间(毫秒)
 * @param {any} value 定时器结束后要返回的值
 * @returns {Promise} 返回一个Promise对象
 */
function delay(delay, value) {
  return new Promise((resolve) => {
    // 使用setTimeout实现延迟
    setTimeout(() => {
      // 延迟结束后resolve,并传递value
      resolve(value);
    }, delay);
  });
}

// 使用示例
console.log('开始执行');

// 1秒后输出"1秒后执行"
delay(1000, "1秒后执行")
  .then(result => {
    console.log(result);
    // 可以继续链式调用,再延迟2秒
    return delay(2000, "再等2秒后执行");
  })
  .then(result => {
    console.log(result);
    return delay(1500); // 也可以不传递返回值
  })
  .then(() => {
    console.log("又过了1.5秒");
  })
  .finally(() => {
    console.log("所有定时任务完成");
  });

这个封装的定时器函数有以下特点:

  1. 接收两个参数:延迟时间(毫秒)和要返回的值
  2. 返回一个Promise对象,在指定延迟后会resolve并返回设定的值
  3. 支持链式调用,可以很方便地实现多个连续的定时操作
  4. 可以配合then、catch(虽然这里不会reject,但可以捕获上游错误)和finally使用
目录
相关文章
|
4月前
|
监控 前端开发 中间件
Vuex 中间件和插件机制有什么优缺点?
Vuex 中间件和插件机制有什么优缺点?
331 125
|
4月前
|
移动开发 前端开发 JavaScript
在React中使用React Foldable Layout时,如何处理折叠区域的样式问题?
在React中使用React Foldable Layout时,如何处理折叠区域的样式问题?
286 124
|
4月前
|
存储 安全 JavaScript
除了加密密钥的安全性,还有哪些方面需要注意 Pinia 插件的安全性?
除了加密密钥的安全性,还有哪些方面需要注意 Pinia 插件的安全性?
300 5
|
8月前
|
中间件
在 Vuex 中,中间件和插件的执行顺序是怎样的?
在 Vuex 中,中间件和插件的执行顺序是怎样的?
362 72
|
缓存 前端开发 JavaScript
前端优化网站加载速度的具体操作流程是什么?
在实际操作过程中,需要根据网站的具体情况和需求,灵活选择和应用相应的优化方法,并不断进行测试和调整,以达到最佳的优化效果。
417 154
|
搜索推荐 前端开发 定位技术
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
285 2
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
移动开发 编解码 UED
HTML5 中字体大小单位 em 和 rem 的区别
【8月更文挑战第24天】
834 0

热门文章

最新文章