⏱ วิธีใช้ setInterval + clearInterval

นี่คือไวยากรณ์พื้นฐานที่ใช้ใน JavaScript เมื่อต้องการทำงานซ้ำ ๆ เป็นช่วงเวลาปกติ
ตัวอย่างเช่น ใช้ในสถานการณ์ต่อไปนี้:

  • 🕒 นาฬิกาดิจิตอล: อัปเดตเวลาปัจจุบันทุกวินาทีโดยใช้ setInterval

  • 🖼 สไลด์โชว์รูปภาพ: เปลี่ยนรูปภาพทุก ๆ 5 วินาที

  • 📢 การแจ้งเตือนอัตโนมัติ: แสดงการแจ้งเตือนหรือข้อความเป็นระยะ ๆ

  • 🧮 การนับขึ้นหรือลง: อัปเดตตัวเลขเป็นระยะ

  • 🎮 แอนิเมชันหรือเกม: อัปเดตการเคลื่อนไหวเป็นช่วงเวลา

นับ: 0
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ตัวนับ (เพิ่มทุกวินาที)</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 2rem;
    }
    #counter {
      font-size: 2rem;
      margin: 1rem 0;
    }
    button {
      font-size: 1rem;
      padding: 0.5rem 1.2rem;
      margin: 0.5rem;
    }
  </style>
</head>
<body>

  <h1>⏱ ตัวนับ (เพิ่มทุกวินาที)</h1>
  <div id="counter">จำนวน: 0</div>

  <button onclick="startCounting()">เริ่ม</button>
  <button onclick="stopCounting()">หยุด</button>

  <script>
    let count = 0;
    let intervalId = null;

    function startCounting() {
      if (intervalId !== null) return;
      intervalId = setInterval(() => {
        count++;
        document.getElementById("counter").textContent = "จำนวน: " + count;
      }, 1000);
    }

    function stopCounting() {
      clearInterval(intervalId);
      intervalId = null;
    }
  </script>

</body>
</html>

🧩 การใช้ setInterval เพื่อ "สลับเอฟเฟกต์แบบวน"

ฟังก์ชัน setInterval ไม่ได้ใช้แค่สำหรับนับถอยหลังหรือจับเวลาเท่านั้น — ยังสามารถใช้เพื่อสลับสถานะซ้ำ ๆ ได้อีกด้วย

ตัวอย่างการใช้งานที่เหมาะสม ได้แก่:

  • 💡 ทำให้ข้อความ กระพริบ เพื่อดึงดูดความสนใจ
  • 🔁 เปลี่ยนป้ายบนปุ่มสลับระหว่าง ON / OFF
  • 🎨 เปลี่ยนสีพื้นหลังทุกไม่กี่วินาทีเพื่อสร้าง ลูกเล่นทางสายตา

ตัวอย่างด้านล่างนี้คือการ เปลี่ยนสีพื้นหลังทุก ๆ 3 วินาที:

<script>
let isBlue = true;

setInterval(() => {
  document.body.style.backgroundColor = isBlue ? "#cceeff" : "#ffeedd";
  isBlue = !isBlue;
}, 3000);
</script>

จากตัวอย่างนี้ เราจะเห็นว่า setInterval สามารถสร้าง UI ที่มีการเปลี่ยนแปลงแบบไดนามิก ได้อย่างง่ายดาย ด้วยแนวคิด “จำ → สลับ → กำหนดค่าใหม่”

นอกจากนี้คุณยังสามารถใช้ clearInterval() เพื่อหยุดกระบวนการได้ด้วย บทความต่อไปจะอธิบายตัวอย่างอย่างเช่นปุ่มกระพริบหรือปุ่มหยุดการสลับ