ความแตกต่างระหว่าง setTimeout() และ setInterval() ใน JavaScript

ทั้งคู่ใช้สำหรับ Async Timing แต่วิธีทำงานต่างกัน:

ตัวอย่าง setTimeout

// รอ 2000ms (2 วินาที) แล้วรัน 1 ครั้ง
setTimeout(function() {
  alert('Hello');
}, 2000);

// กับ Arrow Function
setTimeout(() => console.log('Hello'), 2000);

// ส่ง Argument
setTimeout((name) => console.log('Hello ' + name), 1000, 'John');

ตัวอย่าง setInterval

// รันทุก 2000ms (2 วินาที) ไม่รอจนจบการทำงาน
setInterval(function() {
  alert('Hello');
}, 2000);

// กับ Arrow Function
const intervalId = setInterval(() => {
  console.log('Tick: ' + new Date().toLocaleTimeString());
}, 1000);

การหยุด Timer (Clear)

const timeoutId = setTimeout(() => {}, 1000);
clearTimeout(timeoutId); // ยกเลิก Timeout

const intervalId = setInterval(() => {}, 1000);
clearInterval(intervalId); // หยุด Interval

ความแตกต่างสำคัญ: Timing Behavior

setTimeout (Non-blocking, Guaranteed Minimum Delay)

• รอ อย่างน้อย delay ms
• ถ้า Main Thread ยุ่ง จะรันทีหลัง (ไม่แม่นยำสนิท)
• แต่ละครั้งเป็นการ Schedule ใหม่

setInterval (Fixed Interval, Potential Drift)

• พยายามรันทุก delay ms
• ถ้า Callback ใช้เวลานานกว่า delay → Queue สะสม / ข้ามรอบ
• ไม่รับประกัน Interval แม่นยำ (Drift)

แปลง setInterval เป็น setTimeout (Recursive) - แนะนำ

// แทน setInterval - ควบคุม Timing ได้ดีกว่า
function repeat(fn, delay) {
  fn();
  setTimeout(() => repeat(fn, delay), delay);
}

// ใช้งาน
repeat(() => console.log('Tick'), 1000);

// หยุดได้ด้วย Flag
let running = true;
function repeat(fn, delay) {
  if (!running) return;
  fn();
  setTimeout(() => repeat(fn, delay), delay);
}
// running = false เพื่อหยุด

Use Cases

ข้อควรระวัง

• ทั้งคู่ Return Timer ID (Number) ใช้ Clear ต้องเก็บ ID ไว้
• Minimum Delay: 4ms (HTML Spec) - Browser Throttle ใน Background Tab
• Memory Leak: ลืม clearInterval → Function รันตลอด → Leak
• ใน Node.js: setTimeout Return Timeout Object (มี .unref())