ฟังก์ชัน setTimeout ในภาษา JavaScript
ในบทนี้ คุณจะได้เรียนรู้การใช้งานฟังก์ชัน setTimeout สำหรับการเขียนโปรแกรมในภาษา JavaScript บน Node.js มันเป็นฟังก์ชันที่ให้มาโดย Node.js เพื่อสนับสนุนการทำงานแบบ Asynchronous ในภาษา JavaScript
ฟังก์ชัน setTimeout
เป็นฟังก์ชันที่ใช้เพื่อกำหนดให้โค้ดทำงานหลังจากที่เวลาผ่านไปตามที่กำหนด นี่เป็นรูปแบบการใช้งาน
timerId = setTimeout(callback, delay);
ในรูปแบบการใช้งานของฟังก์ชัน setTimeout
เรากำหนดฟังก์ชัน Callback ที่จะถูกเรียกใช้งานเมื่อเวลาผ่านไปตามที่กำหนดใน delay
ที่มีหน่วยเป็นมิลลิวินาที (ms) ฟังก์ชันนี้ส่งค่ากลับเป็น Timer ID ที่สามารถนำไปใช้เพื่อยกเลิกการกำหนดเวลาได้
นี่เป็นตัวอย่างของโปรแกรมที่จะแสดงคำกล่าวทักทายหลังจากเวลาผ่านไป 3 วินาที
setTimeout(() => {
console.log('Hello Mateo!');
}, 3000);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Hello Mateo!
ในตัวอย่าง ฟังก์ชัน setTimeout
จะนำฟังก์ชัน Callback เข้าคิวเพื่อเรียกใช้งานในภายหลังเมื่อเวลาผ่านไปแล้ว 3 วินาทีหรือ 3000 มิิลลิวินาที คุณสามารถเขียนโค้ดอะไรก็ได้ในฟังก์ชัน Callback เพื่อหน่วงการทำงานของมัน
ต่อไปมาดูการทำงานของฟังก์ชัน setTimeout
ร่วมกับการทำงานของโค้ดในโปรแกรมหลัก มากำหนดเวลาหน่วงให้กับฟังก์ชันเป็น 0
เพื่อให้มันทำงานในทันที นี่เป็นตัวอย่าง
setTimeout(() => {
console.log('Zero');
}, 0);
setTimeout(() => {
console.log('One');
}, 1000);
setTimeout(() => {
console.log('Two');
}, 2000);
console.log('Main');
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Main
Zero
One
Two
ในตัวอย่างนี้ เราได้ใช้ฟังก์ชัน setTimeout
เพื่อหน่วงเวลาการทำงานของโปรแกรมสามครั้ง โดยกำหนดเวลาหน่วงเป็น 0
, 1000
และ 2000
มิลลิวินาที ตามลำดับ ในส่วนของโปรแกรมหลักได้แสดงข้อความ "Main" ออกทางหน้าจอ และส่วนอื่นๆ ของโปรแกรมดูเหมือนจะทำงานปกติ ยกเว้นในคำสั่งนี้
setTimeout(() => {
console.log('Zero');
}, 0);
ในคำสั่งนี้หน่วงเวลาเป็น 0
มิลลิวินาที นั่นหมายความว่าเราต้องการให้มันทำงานในทันที และคุณอาจจะคิดว่า "Zero" ควรจะแสดงผลก่อน "Main" แต่นั่นไม่ใช่ เนื่องจากโค้ดของฟังก์ชัน setTimeout
จะทำงานหลังจากโปรแกรมรอบปัจจุบันทำงานเสร็จก่อนเสมอ แม้ว่าเวลาเป็นถูกกำหนดเป็น 0
ก็ตาม ซึ่งนี่เป็นหลักการการทำงานของ Event loop บน Node.js และเราไม่ได้พูดถึงมันในบทนี้
นอกจากนี้ ฟังก์ชัน setTimeout
สามารถที่จะเรียกใช้งานซ้อนกันได้ ในตัวอย่างนี้ เราจะเขียนโปรแกรมเพื่อหน่วงเวลาเพื่อแสดงข้อความ "Hi" จากนั้นหน่วงเวลาอีกครั้งเพื่อแสดงข้อความ "Hello" ต่อ นี่เป็นตัวอย่าง
setTimeout(() => {
console.log('Hi');
setTimeout(() => {
console.log('Hello');
}, 1000);
}, 1000);
นี่เป็นผลลััพธ์การทำงานของโปรแกรม
Hello
Hi
ในตัวอย่างนี้ เราใช้ฟังก์ชัน setTimeout
แบบซ้อนกันเพื่อหน่วงเวลาให้โปรแกรมทำงานเป็นแบบลำดับ โดยครัั้งแรกหน่วงเวลา 1 วินาทีเพื่อแสดงคำกล่าวทักทาย "Hi" จากนั้นภายในฟังก์ชัน Callback ของการหน่วงครั้งแรก เราใช้ฟังก์ชัน setTimeout
สำหรับหน่วงเวลาการแสดงผลคำกล่าวทักทายที่สอง "Hello" อีกครั้ง
และอย่างที่ได้บอกไปในตอนต้น ทุกครั้งเมื่อเรากำหนดเวลาเพื่อหน่วงการทำงานของโปรแกรมด้วยฟังก์ชัน setTimeout
มันจะส่งค่ากลับเป็น Timer ID เสมอ ยกตัวอย่างเช่น
let timerId = setTimeout(...);
เราสามารถใช้ Timer ID เพื่อยกเลิกการหน่วงเวลาที่ีจะเกิดขึ้นได้ด้วยฟังก์ชัน clearTimeout
ในตัวอย่างนี้ เป็นการใช้ฟังก์ชัน clearTimeout
เพื่อยกเลิกการทำงานของฟังก์ชัน setTimeout
ที่ถูกกำหนดการหน่วงเวลาไปก่อนหน้าแล้ว
นี่เป็นโปรแกรมสำหรับการส่งจรวดไปดาวครั้งคาร แต่ในทันใดนั้น เราเปลี่ยนใจและต้องการยกเลิกการส่งจรวดไปดาวอังคาร นี่เป็นโค้ดของโปรแกรม
console.log('Rocket will be sent to Mars in 10 seconds.');
let timerId = setTimeout(() => {
console.log('Rocket is now sent to our new colonies on Mars.');
}, 10000);
setTimeout(() => {
console.log('Oops! Something went wrong.');
console.log('The mission has been canceled.');
clearTimeout(timerId);
}, 2000);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Rocket will be sent to Mars in 10 seconds.
Oops! Something went wrong.
The mission has been canceled
ในตัวอย่างนี้ เป็นการจำลองการปล่อยจรวดไปยังดาวอังคาร ดาวที่คาดว่าจะเป็นอาณานิคมใหม่ของเราชาวโลกในอนาคตอันใกล้นี้
let timerId = setTimeout(() => {
console.log('Rocket is now sent to our new colonies on Mars.');
}, 10000);
เราได้เริ่มกำหนดเวลาสำหรับการปล่อยจรวดใน 10 วินาทีด้วยฟังก์ชัน setTimeout
นี่ส่งค่ากลับเป็น Timer ID และเก็บมันไว้ในตัวแปร timerId
จากนั้นเป็นการจำลองการทำงานว่าจะมีเหตุฉุกเฉินเกิดขึ้นในอีก 2 วินาที และเมื่อมันเกิดขึ้น สิ่งที่เราต้องการทำคือยกเลิกการปล่อยจรวดที่จะเกิดขึ้นในอีก 8 วินาทีข้างหน้า
setTimeout(() => {
console.log('Oops! Something goes wrong.');
console.log('The mission has been canceled.');
clearTimeout(timerId);
}, 2000);
เรายกเลิกการทำงานของฟังก์ชัน setTimeout
สำหรับการปล่อยจรวดด้วยฟังก์ชัน clearTimeout
โดยส่ง Timer ID เป็นพารามิเตอร์ของฟังก์ชัน นั่นหมายความว่าการกำหนดเวลาที่เกิดขึ้นสำหรับ Timer ID นี้จะไม่ถูกทำงานเนื่องจากมันถูกยกเลิกไปแล้ว
อย่างไรก็ตาม ฟังก์ชัน setTimeout
จะส่งค่ากลับเป็น Timer ID เสมอ ในกรณีที่ไม่ต้องการใช้มัน คุณสามารถละเว้นมันไปได้เหมือนกับตัวอย่างก่อนหน้าที่เราทำ
ฟังก์ชัน setTimeout
ไม่ได้เป็นฟังก์ชันของภาษา JavaScript แต่มันเป็นฟังก์ชันของ Host environments เช่น เว็บบราวน์เซอร์ หรือ Node.js ที่ให้มาเพื่อรองรับการทำงานแบบ Asynchronous ในภาษา JavaScript
ในบทนี้ คุณได้เรียนรู้การใช้งานฟังก์ชัน setTimeout สำหรับหน่วงเวลาการทำงานของโปรแกรม และการยกเลิกการหน่วงเวลาที่กำหนดไปแล้วด้วยฟังก์ชัน clearTimeout ซึ่งทั้งสองฟังก์ชันนี้ออกแบบมาสำหรับใช้คู่กัน