วิธีใช้ฟังก์ชัน setInterval ใน JavaScript

เมธอด setInterval() ใน JavaScript ใช้สำหรับเรียกใช้ฟังก์ชันหรือประเมินนิพจน์ซ้ำๆ ตามช่วงเวลาที่กำหนด

ไวยากรณ์ (Syntax)

setInterval(function, interval_in_milliseconds, param1, param2, param3...)

พารามิเตอร์:

function - ฟังก์ชันที่จะถูกเรียกใช้ซ้ำ
interval_in_milliseconds - ช่วงเวลาในมิลลิวินาที (1000 มิลลิวินาที = 1 วินาที)
param1, param2, ... - พารามิเตอร์เพิ่มเติมที่จะส่งให้ฟังก์ชัน (ตัวเลือก)

ตัวอย่างการใช้งาน

ตัวอย่างนี้แสดงนาฬิกาเวลาปัจจุบันและอัปเดตทุก 500 มิลลิวินาที (0.5 วินาที)

<!DOCTYPE html>
<html>
  <body>
    <p id="test"></p>
    <script>
      var myVar = setInterval(function(){ displayTimer() }, 500);
      function displayTimer() {
        var date = new Date();
        var time = date.toLocaleTimeString();
        document.getElementById("test").innerHTML = "Time: " + time;
      }
    </script>
  </body>
</html>

วิธีหยุดการทำงานของ setInterval

ใช้ clearInterval() พร้อมกับ ID ที่ได้จาก setInterval():

var myInterval = setInterval(myFunction, 1000);

// หยุดหลัง 10 วินาที
setTimeout(function() {
  clearInterval(myInterval);
  console.log('Interval หยุดทำงานแล้ว');
}, 10000);

ข้อควรระวัง

หากฟังก์ชันใช้เวลานานกว่าช่วง interval อาจเกิดการทำงานทับซ้อนกันได้
ควรใช้ setTimeout แบบเรียกซ้ำ (recursive) แทนถ้าต้องการความแม่นยำสูงกว่า
อย่าลืม clearInterval เมื่อไม่ต้องการแล้ว เพื่อป้องกัน memory leak