Browser APIs

setTimeout — รันโค้ดหลังจากหน่วงเวลา

`setTimeout` รับฟังก์ชัน (callback) และตัวเลข milliseconds แล้วรัน callback นั้น **ครั้งเดียว** หลังจากเวลาที่กำหนด syntax: `setTimeout(callback, delayMs)` `setTimeout` คืน timer ID — ตัวเลขที่ใช้ยกเลิก timer ได้ในภายหลัง

// แสดงข้อความหลัง 2 วินาที
setTimeout(function() {
  console.log("2 วินาทีผ่านไปแล้ว");
}, 2000);

// arrow function
setTimeout(() => {
  document.querySelector("#message").textContent = "โหลดเสร็จแล้ว!";
}, 1500);

setInterval — รันโค้ดซ้ำทุก n milliseconds

`setInterval` รับฟังก์ชันและตัวเลข milliseconds แล้วรัน callback นั้น **ซ้ำๆ** ทุกช่วงเวลาที่กำหนด จนกว่าจะหยุดด้วย `clearInterval` syntax: `setInterval(callback, intervalMs)`

let count = 0;

const timerId = setInterval(function() {
  count++;
  document.querySelector("#count").textContent = count;
}, 1000); // ทำงานทุก 1 วินาที

clearTimeout / clearInterval — ยกเลิก timer

ส่ง timer ID ที่ได้จาก `setTimeout` หรือ `setInterval` ให้ `clearTimeout` หรือ `clearInterval` เพื่อยกเลิก

// ยกเลิก setTimeout ก่อนครบเวลา
const id = setTimeout(() => console.log("จะไม่รัน"), 3000);
clearTimeout(id);

// หยุด setInterval เมื่อนับถึง 5
let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(count);
  if (count >= 5) {
    clearInterval(intervalId);
    console.log("หยุดแล้ว");
  }
}, 1000);

ข้อควรระวัง

• **delay ไม่แม่นยำ 100%** — `setTimeout(fn, 0)` ไม่รันทันที แต่รอให้ call stack ว่างก่อน ค่า delay คือ "อย่างน้อย" ไม่ใช่ "พอดีเป๊ะ"
• **เก็บ timer ID เสมอ** — ถ้าไม่เก็บ ID ของ `setInterval` จะหยุดมันทีหลังไม่ได้
• **อย่า setInterval ซ้อน** — เรียก `setInterval` หลายครั้งโดยไม่ clear ของเดิม จะมี interval หลายตัวทำงานพร้อมกัน ทำให้ค่าเปลี่ยนเร็วผิดปกติ
• **`this` ใน callback** — regular function ใน `setTimeout`/`setInterval` จะมี `this` เป็น `window` — ใช้ arrow function หรือ `.bind(this)` ถ้าต้องการ `this` ของ object

Lab 1: แสดงข้อความหลัง delay ด้วย setTimeout

Lab 2: นับขึ้นด้วย setInterval และหยุดด้วย clearInterval