วิธีเรียกใช้ฟังก์ชันหลังจากระยะเวลาที่กำหนดด้วย JavaScript

คุณสามารถชะลอการทำงานของฟังก์ชัน JavaScript ได้โดยใช้ setTimeout() . ในตัว วิธีการ

สมมติว่าคุณต้องการแสดงกล่องโต้ตอบการแจ้งเตือนหลังจาก 3 วินาที

ก่อนอื่น คุณต้องแปลง 3 วินาทีเป็นมิลลิวินาที (ms) ซึ่งก็คือ 3000ms จากนั้นตั้งค่าฟังก์ชัน:

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

ด้านบนนี้เป็นฟังก์ชันที่ไม่ระบุชื่อ (นิรนาม) ซึ่งใช้งานไม่ได้จริงในชีวิตจริง เนื่องจากสามารถใช้ได้เพียงครั้งเดียวเท่านั้น และไม่มีคำอธิบาย

นี่คือฟังก์ชันเดียวกันทั้งหมด แต่ใน นิพจน์ฟังก์ชันที่มีชื่อ:

const delayThreeSeconds = function() {
  alert("That’s 3 seconds!")
}

setTimeout(delayThreeSeconds, 3000)

ตอนนี้คุณสามารถใช้ฟังก์ชันการหน่วงเวลาซ้ำได้ทุกที่ในโครงการโดยอ้างอิง delayThreeSeconds ตัวแปร

การหน่วงเวลา setTimeout เป็นการชี้นำ — ไม่แม่นยำ

คนส่วนใหญ่ไม่ทราบว่าเวลาที่คุณระบุใน setTimeout คือ การหน่วงเวลาการดำเนินการฟังก์ชันขั้นต่ำ — ไม่ใช่จำนวนที่แน่นอนในการดำเนินการ

ดังนั้น หากคุณระบุ 3000ms (3 วินาที) อาจใช้เวลานานกว่านั้นมากก่อนที่ฟังก์ชันของคุณจะทำงาน เนื่องจาก JavaScript เป็นแบบซิงโครนัส จะทำงานทีละงาน

ดังนั้นหากเว็บไซต์ของคุณมีงานฟังก์ชัน JavaScript อื่นๆ จำนวนมากที่ตั้งค่าให้ดำเนินการก่อน setTimeout ของคุณ งานเหล่านั้นจะต้องทำให้เสร็จก่อน และอาจใช้เวลาตั้งแต่สองสามมิลลิวินาทีไปจนถึงหลายวินาที

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

ทั้งหมดนี้ทำให้ setTimeout ค่อนข้างคาดเดาไม่ได้ หรืออย่างน้อยก็ไม่น่าเชื่อถือหากคุณต้องการความแม่นยำแบบเจาะจง

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

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

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

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

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

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