Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

JavaScript clearTimeout() &clearInterval() เมธอด


วิธีการ clearTimeout() จะล้างการหมดเวลาที่กำหนดไว้ก่อนหน้านี้โดยฟังก์ชัน setTimeout() วิธีการ clearInterval() จะล้างช่วงเวลาที่ถูกกำหนดโดยฟังก์ชัน setInterval() ก่อนหน้านี้

ต่อไปนี้เป็นรหัสสำหรับวิธี clearTimeout() และ clearInterval() -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .timeout {
      margin-right: 170px;
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .interval {
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .stopTimeout {
      margin-right: 100px;
   }
</style>
</head>
<body>
<h1>clearTimeout() & clearInterval() Method</h1>
<div class="timeout" style="background-color: blue;"></div>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<button class="startInterval" onclick="startInterval()">
START INTERVAL
</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<div class="resultTimeout"></div>
<script>
   let resInterval = document.querySelector(".resultInterval");
   let resTimeout = document.querySelector(".resultTimeout");
   function changeColor(ele) {
      if (ele.style.backgroundColor == "blue") {
         ele.style.backgroundColor = "red";
      } else {
         ele.style.backgroundColor = "blue";
      }
   }
   let timeout;
   function startTimeout() {
      timeout = setTimeout(
      changeColor.bind(this, document.querySelector(".timeout")),
      1500
   );
   resTimeout.innerHTML = "Timeout has been started";
}
function stopTimeout() {
   clearTimeout(timeout);
   resTimeout.innerHTML = "Timeout has been cleared";
}
let interval;
function startInterval() {
   interval = setInterval(
      changeColor.bind(this, document.querySelector(".interval")),
      1500
   );
   resInterval.innerHTML = "Interval has been started";
}
function stopInterval() {
   clearInterval(interval);
   resInterval.innerHTML = "Interval has been cleared";
}
</script>
</body>
</html>

ผลลัพธ์

JavaScript clearTimeout() &clearInterval() เมธอด

เมื่อคลิกปุ่ม "START TIMEOUT" และ "START INTERVAL" และรอสักครู่ -

JavaScript clearTimeout() &clearInterval() เมธอด

เมื่อคลิกปุ่ม "STOP TIMEOUT" และ "STOP INTERVAL" -

JavaScript clearTimeout() &clearInterval() เมธอด