วิธีหน่วงเวลาการเรียกฟังก์ชัน JavaScript ด้วย setTimeout

ใช้ setTimeout() เพื่อหน่วงเวลาการเรียกฟังก์ชัน รันเพียงครั้งเดียวหลังจากเวลาที่กำหนด

ไวยากรณ์

setTimeout(functionName, milliseconds, arg1, arg2, arg3...)

Parameters:

• functionName - ฟังก์ชันที่จะรัน (function reference หรือ callback)
• milliseconds - เวลาหน่วงในมิลลิวินาที (1000 = 1 วินาที)
• arg1, arg2, ... - Arguments ส่งให้ฟังก์ชัน (Modern browsers)

ตัวอย่างจากบทความ

<!DOCTYPE html>
<html>
  <body>
    <button onclick="timeFunction()">Submit</button>
    <script>
      function timeFunction() {
        setTimeout(function(){ alert("After 5 seconds!"); }, 5000);
      }
    </script>
    <p>คลิกปุ่มด้านบนและรอ 5 วินาที</p>
  </body>
</html>

รูปแบบการใช้งานต่างๆ

1. Function Reference (แนะนำ)

function showAlert() {
  alert('Hello!');
}

setTimeout(showAlert, 1000); // ถูกต้อง - ส่ง function reference

2. Anonymous Function

setTimeout(function() {
  alert('Anonymous function after 1 second');
}, 1000);

3. Arrow Function (ES6)

setTimeout(() => {
  alert('Arrow function after 1 second');
}, 1000);

4. ส่ง Arguments (Modern)

function greet(name, age) {
  alert(`Hello ${name}, age ${age}`);
}

setTimeout(greet, 2000, 'John', 25); // ส่ง args โดยตรง

5. String (ไม่แนะนำ - เหมือน eval)

setTimeout("alert('Hello')", 1000); // ❌ ไม่แนะนำ - ใช้ string eval

Cancel Timeout

const timeoutId = setTimeout(() => {
  console.log('This will not run');
}, 5000);

clearTimeout(timeoutId); // ยกเลิกก่อนถึงเวลา

setTimeout vs setInterval

Best Practices

• ใช้ Function Reference หรือ Arrow Function แทน String
• เก็บ timeoutId ไว้เพื่อ clearTimeout ถ้าจำเป็น
• ใน React: ใช้ useEffect cleanup return clearTimeout
• สำหรับ Debounce/Throttle: ใช้ library (lodash) หรือ custom hook

Debounce Example

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const debouncedSearch = debounce((query) => {
  console.log('Search:', query);
}, 300);

// ใช้งาน
input.addEventListener('input', e => debouncedSearch(e.target.value));