JavaScript Phase Overview

Timer ใช้ทำอะไร

`Timer` ใช้สำหรับสั่งให้โค้ดทำงานหลังจากรอช่วงเวลาหนึ่ง หรือให้ทำงานซ้ำเป็นรอบ ๆ เหมาะกับงานอย่างการแสดงผลแบบหน่วงเวลา การนับถอยหลัง การอัปเดต UI เป็นช่วง และการยกเลิกงานที่ตั้งเวลาไว้

• หน่วงเวลาแสดงข้อความหรือเริ่ม action บางอย่าง
• รันงานซ้ำทุกช่วงเวลาที่กำหนด
• หยุด timer เมื่อถึงเงื่อนไขที่ต้องการ
• เข้าใจความต่างระหว่างการตั้งเวลา 1 ครั้ง กับการตั้งเวลาแบบวนซ้ำ

ใน series นี้มีอะไรบ้าง

รอบนี้เราแยก `Timer` ออกมาเป็นหัวข้อหลัก เพื่อให้เรื่องการตั้งเวลาและการยกเลิก timer อ่านเป็นส่วน ๆ ได้ง่ายขึ้นก่อนกลับมาเติมรายละเอียดจริงในแต่ละหน้า

• `setTimeout()` — ตั้งเวลาให้ callback ทำงานครั้งเดียว
• `setInterval()` — ตั้งเวลาให้ callback ทำงานซ้ำเป็นรอบ
• `clearTimeout() / clearInterval()` — ยกเลิก timer ที่ตั้งไว้

ควรเริ่มจากหน้าไหน

ถ้ายังไม่เคยใช้ timer มาก่อน แนะนำให้เริ่มจาก `setTimeout()` ก่อนเพื่อเข้าใจแนวคิดการหน่วงเวลา จากนั้นค่อยไป `setInterval()` และปิดท้ายด้วยการยกเลิก timer เพราะทั้งสามหน้าต่อกันโดยตรง

• เริ่มจาก `setTimeout()` ถ้าต้องการเข้าใจการรอแล้วค่อยทำงาน
• อ่าน `setInterval()` เมื่อต้องการทำงานซ้ำเป็นช่วงเวลา
• ตามด้วย `clearTimeout() / clearInterval()` เพื่อควบคุมและหยุด timer ให้ถูกจังหวะ