前端使用javascript如何进行sleep

boyanx6个月前技术教程20

很多语言中都有sleep(),delay()等方法,它能让我们的程序不急着去执行下一步操作,而是延迟、等待一段时间。开发实践中经常会遇到需要这样的需求,比如等待几分钟再去检查某一事件是否发生。JavaScript里有setTimeout()方法来实现设定一段时间后执行某个任务,但写法很丑陋,需要提供回调函数:

setTimeout(function(){ console.log("some opertaion after 3 seconds later"); }, 3000);

ES6中我们可以借助 Promise对setTimeout函数进行改良,这样就能实现我们想要的sleep()函数的效果了,下面就是把setTimeout()封装在一个Promise中的示例。

async function sleep() {
 let s = new Date().getTime();
 console.log('start...',s);
 await sleep_inner(1000);
 let e = new Date().getTime()
 console.log('end!',e," diff(ms)",e-s);
}

function sleep_inner(ms) {
 return new Promise(resolve => setTimeout(resolve, ms));
}

sleep();

运行这段代码你会发现代码被阻塞了1秒钟,而且这种写法很优雅,就像其它编程语言里的延迟、等待函数。Promise API使我们避免传入回调函数,我们在实现中还使用了ES6中的箭头(arrow)函数。

这里需要提到的一个问题是,我们使用了 async/await 关键字,但 async/await 是ES7中的语法,目前还是处于试验阶段。那现在想用这个 async/await 特性怎么办?可以尝试 google 的一个 JavaScript 预编译器 traceur,可以将高版本的 JavaScript 编译为 ES5 代码,已经实验性的支持了 async/await (需要使用 –experimental 来指定开启)。

相关文章

Web前端:React JS越来越受欢迎,它的主要优点为什么要使用它?

  React JS是一个开源JavaScript库,用于为单页应用程序构建用户界面,它还为不同的移动应用程序提供视图层,并创建可重用的UI组件。  我们可以在Web应用程序的数据中创建特定的更改,而...

JS严格模式:更安全、更高效的代码实践

在JavaScript开发中,严格模式(Strict Mode)是一个非常重要的特性。它从ES5开始引入,旨在让JavaScript代码运行在更严格的条件下,从而提高代码的安全性和性能。本文将详细介绍...

ES6基础——环境构建、任务自动化、服务器搭建

1. 为什么学习 ES6 需要构建环境1. 因为 ES6 一些语法, 在浏览器中是不能直接运行的 。2. 环境构建内容:1. 基础架构 1. 项目需要放置那些目录 。 2. 那些目录放置那...

Bun 1.0 JavaScript 运行时发布,附带 Windows“实验”版

作者 | 核子可乐、丁晓昀Bun 团队已经为其 JavaScript/TypeScript 运行时公布了 1.0 稳定版,正式版在速度、集成度和兼容性等方面均做出了强有力的承诺。项目缔造者 Jarre...

Next.js 15 来了,全新的编译器、700倍的构建速度提升

Next.js 15 来了,让全栈Web应用开发变得比以往任何时候都更简单高效!全新的编译器、700倍的构建速度提升,创建高性能的全栈Web应用从未如此轻松。让我们一起来探索一下 v15 的最新特性:...

揭秘GraalVM编译器,让你的程序性能原地爆炸!

咱们平时写Java代码,是不是经常觉得:代码写完了,功能实现了,跑起来也行,但总感觉速度还能再快点?尤其是在高并发、大数据处理、低延迟要求的场景下,每一毫秒的优化都至关重要!你可能会想,我写的是Jav...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。