รัน Function หลังจากเวลาที่กำหนด ด้วย JavaScript setTimeout

คุณสามารถหน่วงเวลาการ execute function ใดๆ ได้ด้วย built-in method setTimeout()

สมมติต้องการแสดง alert dialog หลัง 3 วินาที

แปลง 3 วินาทีเป็น milliseconds (ms) = 3000ms แล้วตั้งค่า function:

setTimeout(function() {
  alert("That's 3 seconds!");
}, 3000);

ข้างบนเป็น anonymous function ไม่ค่อยปฏิบัติจริง เพราะใช้ครั้งเดียวและไม่ descriptive

ตัวอย่างเดียวกันแต่เป็น named function expression:

const delayThreeSeconds = function() {
  alert("That's 3 seconds!");
};
setTimeout(delayThreeSeconds, 3000);

ตอนนี้ reuse function ได้ทุกที่ในโปรเจกต์โดยอ้างอิง delayThreeSeconds

setTimeout delay เป็น suggestive — ไม่ precise

คนส่วนใหญ่ไม่รู้ เวลาที่ระบุใน setTimeout คือ minimum function-execution delay — ไม่ใช่ เวลาที่แน่นอนที่จะ execute

ถ้าระบุ 3000ms (3 วินาที) อาจนานกว่านั้นมากก่อนที่ function จะ run เพราะ JavaScript เป็น synchronous รันทีละ task

ถ้าเว็บมี JS tasks อื่นที่ตั้งไว้ execute ก่อน setTimeout function นั้น tasks นั้นต้องเสร็จก่อน — อาจใช้เวลาตั้งแต่ไม่กี่ ms ถึงหลายวินาที

สาเหตุ delay ใหญ่: function ใด function หนึ่งต้องโหลด script ใหญ่จาก external source ก่อนจะเสร็จ — บẫบที่มือใหม่หรือมืออาชีพก็ตกได้

สิ่งนี้ทำให้ setTimeout ค่อนข้าง unpredictable หรือ unreliable หากต้องการ precision แบบจุดประกาย

วิธีหลีกเลี่ยงปัญหานี้ (ส่วนใหญ่)

ถ้ามี function ใดที่ timing critical ให้ตั้งให้ run ก่อน function อื่นๆ จะช่วยให้ function สำคัญที่สุด run เร็วที่สุด

แม้จะตั้ง critical function ให้ run ก่อน ยังอาจมี บาง execution delay เช่น user มี addons/extensions มากใน browser ซอฟต์แวร์เหล่านั้นรันบน JS — ไม่สามารถคาดการณ์ได้ว่าจะ delay โค้ดของคุณเท่าไหร่

ทั้งหมดนี้คือเหตุผลที่ performance สำคัญ และต้อง test code performance ในทุก browser และหลาย devices เพื่อ UX ที่สม่ำเสมอ

คุ้มค่าที่จะรู้: สิ่งที่เรียนวันนี้ใช้กับ setInterval ได้เช่นกัน แตกต่างตรงที่ setInterval run ซ้ำๆ — setTimeout run แค่ครั้งเดียว