Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để thêm độ trễ trong một vòng lặp trong JavaScript?

Để thêm độ trễ trong vòng lặp, hãy sử dụng metod setTimeout () trong JavaScript. Sau đây là độ trễ chuyển đổi mã trong một vòng lặp -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Adding delay in a loop in JavaScript</h1>
<div class="result"></div>
<button class="Btn">Start</button>
<h3>Click on the above button to start the loop</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   BtnEle.addEventListener("click", () => {
      for (let i = 0; i < 10; i++) {
         setTimeout(function () {
            resEle.innerHTML += "i = " + i + "<br>";
         }, 2000 * i);
      }
   });
</script>
</body>
</html>

Đầu ra

Làm cách nào để thêm độ trễ trong một vòng lặp trong JavaScript?

Khi nhấp vào nút ‘BẮT ĐẦU’, 3 sẽ có độ trễ sau mỗi lần lặp -

Làm cách nào để thêm độ trễ trong một vòng lặp trong JavaScript?