您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript怎么模拟 delay、sleep、pause、wait 方法

时间:2023-09-22 11:43:41  来源:微信公众号  作者:大迁世界

许多编程语言都有一个 sleep 函数,可以延迟程序的执行若干秒。JAVAScript缺少这个内置功能,但不用担心。在这篇文章中,我们将探讨在JavaScript代码中实现延迟的各种技巧,同时考虑到该语言的异步性质。

如何在 JS 中创建 sleep 函数

对于那些只想快速解决问题而不想深入了解技术细节的人,我们也有简单明了的解决方案。下面是如何在你的JavaScript工具箱中添加一个 sleep 函数的最直接方式:

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

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });

运行这段代码,你会在控制台看到 “Hello”。然后,在短暂的两秒钟后,“World!”v会接着出现。这是一种既简洁又有效的引入延迟的方法。

如果你只是为了这个来的,那太好了!但如果你对“为什么”和“怎么做”的原因感到好奇,还有更多可以学习的内容。JavaScript中处理时间有其细微之处,了解这些可能会对你有所帮助。

理解JavaScript的执行模型

现在我们已经有了一个快速的解决方案,让我们深入了解JavaScript的执行模型的机制。理解这一点对于有效地管理代码中的时间和异步操作至关重要。

考虑以下Ruby代码:

require '.NET/http'
require 'json'

url = 'https://api.Github.com/users/jameshibbard'
uri = URI(url)
response = JSON.parse(Net::HTTP.get(uri))
puts response['public_repos']
puts 'Hello!'

正如人们所期望的,这段代码向GitHub API发送一个请求以获取我的用户数据。然后解析响应,输出与我的GitHub帐户关联的公共仓库的数量,最后在屏幕上打印“Hello!”。执行是从上到下进行的。

相比之下,这是相同功能的JavaScript版本:

fetch('https://api.github.com/users/jameshibbard')
  .then(res => res.json())
  .then(json => console.log(json.public_repos));
console.log('Hello!');

如果你运行这段代码,它会先在屏幕上输出“Hello!”,然后输出与我的GitHub帐户关联的公共仓库的数量。

这是因为在JavaScript中,从API获取数据是一个异步操作。JavaScript解释器会遇到 fetch 命令并发送请求。然而,它不会等待请求完成。相反,它会继续执行,将“Hello!”输出到控制台,然后当请求在几百毫秒后返回时,它会输出仓库的数量。

如何在JavaScript中正确使用SetTimeout

既然我们已经更好地理解了JavaScript的执行模型,让我们看看JavaScript是如何处理延迟和异步代码的。

在JavaScript中创建延迟的标准方法是使用其 setTimeout 方法。例如:

console.log('Hello');
setTimeout(() => {  console.log('World!'); }, 2000);

这将在控制台上输出 "Hello",然后两秒后输出 "World!"。在很多情况下,这已经足够了:做某事,然后在短暂的延迟后,做其他事情。问题解决!

但不幸的是,事情并不总是那么简单。

你可能会认为 setTimeout 会暂停整个程序,但事实并非如此。它是一个异步函数,这意味着其余的代码不会等待它完成。

例如,假设你运行了以下代码:

console.log('Hello');
setTimeout(() => { console.log('World!'); }, 2000);
console.log('Goodbye!');

你会看到以下输出:

Hello
Goodbye!
World!

注意“Goodbye!”是如何出现在“World!”之前的?这是因为 setTimeout 不会阻塞其余代码的执行。

这意味着你不能这样做:

console.log('Hello');
setTimeout(1000);
console.log('World');

"Hello" 和 "World" 会立即被记录在控制台上,之间没有明显的延迟。

你也不能这样做:

for (let i = 0; i < 5; i++) {
  setTimeout(() => { console.log(i); }, i * 1000);
}

花一秒钟考虑一下上面的代码片段可能会发生什么。

它不会在每个数字之间延迟一秒钟打印数字 0 到 4。相反,你实际上会得到五个 4,它们在四秒后一次性全部打印出来。为什么呢?因为循环不会暂停执行。它不会等待 setTimeout 完成才进入下一次迭代。

那么 setTimeout 实际上有什么用呢?现在让我们来看看。

setTimeout() 函数的检查和最佳实践

正如你可以在我们的 setTimeout 教程中阅读到的,原生JavaScript setTimeout 函数在指定的延迟(以毫秒为单位)后调用一个函数或执行一个代码片段。

这可能在某些情况下是有用的,例如,如果你希望在访问者浏览你的页面一段时间后显示一个弹出窗口,或者你希望在从元素上移除悬停效果之前有短暂的延迟(以防用户意外地鼠标移出)。

setTimeout 方法接受一个函数的引用作为第一个参数。

这可以是函数的名称:

function greet(){
  alert('Howdy!');
}
setTimeout(greet, 2000);

它可以是一个指向函数的变量(函数表达式):

const greet = function(){
  alert('Howdy!');
};
setTimeout(greet, 2000);

或者它可以是一个匿名函数(在这种情况下是箭头函数):

setTimeout(() => { alert('Howdy!'); }, 2000);

也可以将一段代码字符串传递给 setTimeout 以供其执行:

然而,这种方法是不可取的,因为:

  1. 它很难阅读(因此很难维护和/或调试)
  2. 它使用了一个隐含的 eval,这是一个潜在的安全风险
  3. 它比替代方案慢,因为它必须调用JS解释器

如前所述,setTimeout 非常适合在延迟后触发一次性操作,但也可以使用 setTimeout(或其表亲 setInterval)来让JavaScript等待直到满足某个条件。例如,下面是如何使用 setTimeout 等待某个元素出现在网页上的方式:

function pollDOM () {
  const el = document.querySelector('my-element');

  if (el.length) {
    // Do something with el
  } else {
    setTimeout(pollDOM, 300); // try agAIn in 300 milliseconds
  }
}

pollDOM();

这假设该元素最终会出现。如果你不确定这是否会发生,你需要考虑取消计时器(使用 clearTimeout 或 clearInterval)。

在 JS 中使用递增超时作为 Sleep 函数的替代方案

有时,你可能会发现自己想要在一系列操作中引入延迟。虽然你可以使用各种方法来模拟一个Sleep函数,但还有另一种经常被忽视的方法:递增超时

这个思路很简单:你不是暂停整个执行线程,而是使用 setTimeout 为每个后续操作增加延迟。这样,你可以创建一个延迟操作的序列,而不会阻塞浏览器或损害用户体验。

下面是一个快速示例:

let delay = 1000; // 从1秒的延迟开始

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(`这是消息 ${i + 1}`);
  }, delay);

  delay += 1000; // 每次迭代延迟增加1秒
}

在这个示例中,第一条消息将在1秒后出现,第二条消息在2秒后,依此类推,直到第五条消息在5秒后。

这种方法的优点是它不阻塞,易于实现,并且不需要了解 promises 或 async/await。然而,它不适用于需要精确计时或错误处理的复杂异步操作

现代JavaScript中的流控制

编写 JavaScript 时,我们经常需要等待某件事情发生(例如,从 API 获取数据),然后做出响应(例如,更新UI以显示数据)。

上面的示例使用了一个匿名回调函数来实现这一目的,但如果你需要等待多个事情发生,语法很快就会变得相当复杂,你最终会陷入回调地狱。

幸运的是,这门语言在过去几年里有了很大的发展,现在为我们提供了新的构造来避免这一点。

例如,使用 async await,我们可以重写最初获取 GitHub API信息的代码:

(async () => {
  const res = await fetch(`https://api.github.com/users/jameshibbard`);
  const json = await res.json();
  console.log(json.public_repos);
  console.log('Hello!');
})();

现在,代码从上到下执行。JavaScript 解释器等待网络请求完成,首先记录公共仓库的数量,然后记录“Hello!”消息。

将Sleep函数引入原生JavaScript

如果你还在看这篇文章,那么我猜你一定是想阻塞那个执行线程,并让JavaScript等待一下。

下面是你可能会这样做的方式:

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

console.log('Hello');
sleep(2000);
console.log('World!');

正如预期的那样,这将在控制台上打印“Hello”,暂停两秒,然后打印“World!”

它通过使用Date.now方法获取自1970年1月1日以来经过的毫秒数,并将该值分配给一个 date 变量。然后它创建一个空的 currentDate 变量,然后进入一个 do ... while 循环。在循环中,它会重复获取自1970年1月1日以来经过的毫秒数,并将该值分配给之前声明的 currentDate 变量。只要 date 和 currentDate 之间的差异小于所需的毫秒数的延迟,循环就会继续进行。

任务完成了,对吗?好吧,也不完全是……

如何在JavaScript中编写更好的Sleep函数

也许这段代码正是你所期望的,但请注意,它有一个很大的缺点:循环会阻塞JavaScript的执行线程,并确保在它完成之前没有人能与你的程序进行交互。如果你需要很大的延迟,甚至有可能会让整个程序崩溃。

那么应该怎么做呢?

事实上,也可以结合本文前面学到的技巧来制作一个不太侵入性的 sleep 方法:

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

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });

这段代码将在控制台上打印“Hello”,等待两秒,然后打印“World!”在底层,我们使用setTimeout 方法在给定的毫秒数后解析一个 promise

注意,我们需要使用一个 then 回调来确保第二条消息是带有延迟的。我们还可以在第一个回调函数后面链式地添加更多回调函数。

这样做是可行的,但看起来不太好看。我们可以使用async ... await来美化它:

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

async function delayedGreeting() {
  console.log('Hello');
  await sleep(2000);
  console.log('World!');
  await sleep(2000);
  console.log('Goodbye!');
}

delayedGreeting();

这看起来更好看,但这意味着使用 sleep 函数的任何代码都需要被标记为 async

当然,这两种方法仍然有一个缺点(或特点),那就是它们不会暂停整个程序的执行。只有你的函数会睡眠:

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

async function delayedGreeting() {
  console.log('Hello');
  await sleep(2000); // await只暂停当前的异步函数
  console.log('World!');
}

delayedGreeting();
console.log('Goodbye!');

上面的代码会依次打印出:

Hello
Goodbye!
World!

这样,你可以根据需要灵活地使用不同的方法和技术来实现JavaScript中的延迟和异步操作。

创建 JS Sleep函数的最佳实践

我们已经探讨了各种在JavaScript中引入延迟的方法。现在让我们总结一下哪种方法最适合不同的场景,以及哪种方法通常应该避免。

1.纯粹的setTimeout

console.log('Hello');
setTimeout(() => { console.log('World!'); }, 2000);



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  Search: JavaScript  点击:(4)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  Search: JavaScript  点击:(25)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  Search: JavaScript  点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06  Search: JavaScript  点击:(52)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  Search: JavaScript  点击:(65)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11  Search: JavaScript  点击:(97)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: JavaScript  点击:(89)  评论:(0)  加入收藏
JavaScript开发者转向Rust的原因?
JavaScript开发者转向Rust的原因可能有很多,这里列出一些可能的原因: 性能: Rust是一种编译型语言,其性能通常优于JavaScript等解释型语言。对于需要处理大量数据或需要高并发的...【详细内容】
2024-01-04  Search: JavaScript  点击:(96)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(4)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(25)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(23)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(52)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(56)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(65)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(97)  评论:(0)  加入收藏
站内最新
站内热门
站内头条