数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中的循环中添加延迟？
循环用于在 JavaScript 中重复操作或迭代数据片段。借助各种技术，我们可以在循环的每次迭代之间添加延迟，以调节执行速度或产生特定的时间效果。本文将教你如何在 JavaScript 循环中包含延迟，以及如何使用它来延迟正在循环内部运行的特定代码段的执行。
让我们看一些示例，以便更好地理解这个概念 -
示例 1 - 使用 setTimeout()
在下面的示例中 -
创建一个包含以下元素的数组 - 1、2、3、4 和 5
处理数组，在每次迭代之间暂停一秒
使用 setTimeout() 函数，processItem() 函数遍历数组，每次迭代延迟 1 秒
文件名 - index.html
<html>
<head>
<title>How to add delay in a loop in JavaScript?</title>
<script>
function delayedLoop() {
var items = [1, 2, 3, 4, 5];
var delay = 1000; // 1 second
function processItem(index) {
// Perform some task with the current item
console.log("Processing item:", items[index]);
// Check if there are more items to process
if (index < items.length - 1) {
// Set a timeout to process the next item after the delay
setTimeout(function () {
processItem(index + 1);
}, delay);
}
}
// Start the loop with the first item
processItem(0);
}
delayedLoop();
</script>
</head>
<body>
<h3>Add Delay in Loop using setTimeout()</h3>
</body>
</html>
输出
结果将类似于下面的图像。
示例 2 - 使用 async/await
在这个例子中，我们将 -
创建一个名为 sleep() 的函数，该函数返回一个在预定时间段后解析的 Promise。
在 delayedLoop() 函数内部，我们将遍历项目数组。await sleep(delay) 语句用于在每次迭代之间引入 1 秒的延迟。
文件名 - index.html
<html>
<head>
<title>How to add delay in a loop in JavaScript?</title>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedLoop() {
var items = [1, 2, 3, 4, 5];
var delay = 1000; // 1 second
for (var i = 0; i < items.length; i++) {
// Perform some task with the current item
console.log("Processing item:", items[i]);
// Wait for the specified delay before processing the next item
await sleep(delay);
}
}
delayedLoop();
</script>
</head>
<body>
<h3>Add Delay in Loop using async/await</h3>
</body>
</html>
输出
结果将类似于下面的图像。
结论
在循环中添加延迟在各种应用中都很有用，例如创建定时动画或控制重复任务的执行速度。我们学习了如何使用 setTimeout() 和带有自定义 sleep() 函数的 async/await 在 JavaScript 中的循环中添加延迟，并查看了一些解释相同的示例。
更新于： 2023年8月16日
4K+ 次查看
广告