วิธีใช้ JavaScript `setInterval` [คู่มือสำหรับผู้เริ่มต้น]

ฟังก์ชันที่มีประโยชน์สำหรับการทำงานซ้ำ ๆ

🔁 setInterval คืออะไร?

setInterval() คือฟังก์ชันที่เรียกใช้ฟังก์ชันอื่นซ้ำ ๆ ตามช่วงเวลาที่กำหนด

setInterval(ฟังก์ชัน, ช่วงเวลามิลลิวินาที);

🕒 ตัวอย่าง: แสดงเวลาปัจจุบันทุกๆ วินาที


<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>นาฬิกาแบบเรียลไทม์</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
      background: #f9f9f9;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    #clock {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>🕒 เวลาปัจจุบัน</h1>
  <div id="clock">--:--:--</div>

  <!-- สคริปต์ -->
  <script>
    setInterval(() => {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }, 1000);
  </script>

</body>
</html>

👇สิ่งนี้จะแสดง👇

--:--:--

🧩 เทคนิคขั้นสูงและข้อควรระวังในการใช้ setInterval

setInterval() เป็นฟังก์ชันที่มีประโยชน์มาก แต่หากใช้งานไม่ถูกต้อง อาจทำให้เกิดปัญหาด้านประสิทธิภาพหรือพฤติกรรมที่ไม่คาดคิดได้ ในส่วนนี้เราจะอธิบายตัวอย่างการใช้งานจริงและข้อควรระวังที่สำคัญ

🎯 กรณีการใช้งานที่มีประสิทธิภาพ

setInterval() เหมาะสำหรับการอัปเดต UI หรือวนลูปแอนิเมชัน ตัวอย่างเช่น การแสดง นาฬิกาดิจิทัล แบบเรียลไทม์ การทำ นับถอยหลัง หรือการแสดง ข้อความแจ้งเตือนเป็นระยะ

⚠ ระวังลูปไม่รู้จบ

เมื่อใช้ setInterval() ควรมีระบบหยุดที่เหมาะสม เช่น การลืมเรียกใช้ clearInterval() อาจทำให้กระบวนการยังคงทำงานต่อแม้ผู้ใช้จะออกจากหน้าแล้ว ส่งผลให้เปลืองหน่วยความจำโดยไม่จำเป็น

🧪 ความแตกต่างจาก setTimeout

setTimeout() ใช้สำหรับเรียกฟังก์ชันเพียงครั้งเดียว ขณะที่ setInterval() จะเรียกซ้ำเป็นระยะเวลาตามที่กำหนด ควรเลือกให้เหมาะสมตามสถานการณ์