วิธีใช้ JavaScript `setTimeout`【คู่มือฉบับสมบูรณ์สำหรับผู้เริ่มต้น】

ฟังก์ชันพื้นฐานของ JavaScript สำหรับเรียกใช้งานคำสั่งหลังจากเวลาที่กำหนด

⏰ เดโมสด: ทดลองใช้ setTimeout

คลิกปุ่มด้านล่าง แล้วข้อความจะปรากฏขึ้นหลังจาก 3 วินาที

วิธีใช้งานเบื้องต้น (โค้ดบางส่วน)

รูปแบบพื้นฐานของ setTimeout นั้นเรียบง่ายมาก เพียงระบุฟังก์ชันที่ต้องการให้ทำงาน และระยะเวลาในหน่วยมิลลิวินาที

// แสดง alert หลังจาก 3000 มิลลิวินาที (3 วินาที)
setTimeout(() => {
  alert("ผ่านไปแล้ว 3 วินาที!");
}, 3000);

คัดลอกและวางได้เลย! ตัวอย่าง HTML สมบูรณ์

บันทึกโค้ดด้านล่างเป็นไฟล์ HTML แล้วเปิดในเบราว์เซอร์เพื่อทดสอบ

<!DOCTYPE html>
<html lang="th">
<head>
  <title>เดโม setTimeout</title>
</head>
<body>

  <h1>ทดสอบ setTimeout</h1>
  <p>ข้อความจะปรากฏหลังจากโหลดหน้าเว็บ 5 วินาที</p>

  <script>
    setTimeout(() => {
      // สร้างและแสดงข้อความใหม่ในหน้า
      const messageDiv = document.createElement('div');
      messageDiv.textContent = '🎉 ผ่านไปแล้ว 5 วินาที!';
      document.body.appendChild(messageDiv);
    }, 5000); // 5000 มิลลิวินาที = 5 วินาที
  </script>

</body>
</html>

ข้อดีและข้อเสีย

ข้อดี:
- ✅ รูปแบบคำสั่งง่าย เหมาะสำหรับผู้เริ่มต้น
- ✅ หน่วงเวลาการทำงาน ช่วยให้ UI ไม่ค้างและเพิ่มประสบการณ์ผู้ใช้
- ✅ ใช้ได้หลากหลาย เช่น แสดงผลตอบรับ หรือควบคุมแอนิเมชัน
ข้อเสีย:
- ❌ ทำงานเพียงครั้งเดียว (หากต้องการทำซ้ำให้ใช้ setInterval)
- ❌ เวลาไม่แม่นยำ 100% (เป็นเพียงเวลารอขั้นต่ำ)
- ❌ ถ้ามีการซ้อนกันหลายชั้น อาจทำให้โค้ดอ่านยาก (Callback hell)

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

setTimeout มีประโยชน์ในหลายกรณี ไม่ใช่แค่หน่วงเวลาเท่านั้น

ตัวอย่างการใช้งานที่พบบ่อย

แสดงข้อความหลังส่งฟอร์ม แล้วซ่อนภายในไม่กี่วินาที
รอผู้ใช้พิมพ์เสร็จก่อนค่อยแสดงคำแนะนำ
เริ่มแอนิเมชันหลังจากโหลดหน้าเว็บเสร็จ
แบ่งงานใหญ่เป็นส่วนเล็ก ๆ เพื่อไม่ให้ UI กระตุก

คำถามที่พบบ่อย (Q&A)

ถาม: ถ้าระบุเวลาเป็น 0 มิลลิวินาที จะเกิดอะไรขึ้น?

ตอบ: จะไม่ทำงานทันที แต่จะถูกใส่ไว้ในคิว และทำหลังจากงานอื่นเสร็จ เป็นเทคนิคที่ใช้แบ่งงานหนักให้เบราว์เซอร์มีเวลาทำงานอื่น

ถาม: ต่างจาก setInterval อย่างไร?

ตอบ: setTimeout ทำงานเพียงครั้งเดียว ส่วน setInterval ทำงานซ้ำไปเรื่อย ๆ หากต้องการหยุดให้ใช้ clearInterval

ถาม: สามารถยกเลิกก่อนทำงานได้ไหม?

ตอบ: ได้! ให้เก็บ ID จาก setTimeout ไว้ เช่น const timerId = setTimeout(...) แล้วใช้ clearTimeout(timerId) เพื่อยกเลิก

สรุป

setTimeout คือฟังก์ชันพื้นฐานที่ทรงพลังของ JavaScript เหมาะอย่างยิ่งในการเริ่มต้นเรียนรู้การทำงานแบบไม่รอ (asynchronous) ใช้ได้ตั้งแต่การตกแต่ง UI ไปจนถึงปรับปรุงประสิทธิภาพ ลองฝึกใช้งานในสถานการณ์จริงดู!