ฟังก์ชัน 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 ซึ่งทั้งสองฟังก์ชันนี้ออกแบบมาสำหรับใช้คู่กัน