Kotchasan PHP Framework

การใช้งาน async/await และ setTimeout ใน JavaScript

ในโลกของการพัฒนา JavaScript การจัดการกับงานที่ทำงานแบบไม่พร้อมกัน (asynchronous tasks) เป็นสิ่งที่ท้าทายและจำเป็น async/await และ setTimeout เป็นสองเครื่องมือที่ใช้ในการจัดการกับการทำงานแบบไม่พร้อมกันที่มีการใช้งานอย่างแพร่หลาย แม้ว่าทั้งสองจะมีวัตถุประสงค์และการใช้งานที่แตกต่างกัน แต่ก็มีบางประเด็นที่สามารถนำมาเปรียบเทียบกันได้ ในบทความนี้เราจะมาดูว่า async/await และ setTimeout มีความเหมือนและความแตกต่างกันอย่างไร และในกรณีใดบ้างที่เหมาะสมกับการใช้งานแต่ละวิธี

async/await

async/await เป็นฟีเจอร์ใน JavaScript ที่ช่วยให้เราจัดการกับการทำงานแบบไม่พร้อมกันในฟังก์ชันที่มีการเรียกใช้โค้ดที่ต้องรอการตอบสนองจากการทำงานอื่น ๆ ก่อน โดยการใช้ async ประกาศว่าฟังก์ชันนั้นเป็นฟังก์ชันแบบไม่พร้อมกัน และ await ใช้เพื่อรอให้การทำงานแบบไม่พร้อมกันเสร็จสิ้นก่อนที่จะไปขั้นตอนต่อไป

การใช้งาน

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

กรณีที่เหมาะสมในการใช้งาน

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

setTimeout

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

การใช้งาน

function delayedMessage() {
    console.log('This message is delayed by 2 seconds');
}

setTimeout(delayedMessage, 2000); // แสดงข้อความหลังจาก 2 วินาที

กรณีที่เหมาะสมในการใช้งาน

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

ความเหมือน และ ความแตกต่าง

ความเหมือน

  • ทั้ง async/await และ setTimeout สามารถใช้ในการควบคุมเวลาการทำงานในโค้ดได้ เช่น การรอให้บางสิ่งเกิดขึ้นก่อนที่จะดำเนินการต่อไป
  • ทั้งสองวิธีใช้ในการจัดการกับการทำงานแบบไม่พร้อมกัน แต่มีการใช้งานและจุดมุ่งหมายที่ต่างกัน

ความแตกต่าง

  • async/await ใช้เพื่อจัดการกับลำดับการทำงานที่ต้องรอการตอบสนองจากงานอื่น ๆ ขณะที่ setTimeout ใช้เพื่อเลื่อนเวลาการทำงานก่อนที่จะทำงานตามโค้ดที่กำหนด
  • async/await เหมาะสำหรับการจัดการกับงานที่ต้องรอให้เสร็จก่อน ขณะที่ setTimeout เหมาะกับงานที่ต้องการตั้งเวลาให้การทำงานเกิดขึ้นในภายหลัง

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

ตัวอย่างการใช้งาน setTimeout ในกรณีการอ่านค่าขนาดของ element หลังจากที่เนื้อหาภายในมีการเปลี่ยนแปลง

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

ตัวอย่างการใช้งาน

// สมมติว่ามี element ที่มี id "content"
 const contentElement = document.getElementById('content');

// การเปลี่ยนแปลงเนื้อหาภายใน element
 contentElement.innerHTML = '<p>Updated content that might change the size of the element.</p>';

// อ่านค่าขนาดของ element หลังจากที่เนื้อหามีการเปลี่ยนแปลง
 const originalHeight = contentElement.offsetHeight;
console.log('Original Height:', originalHeight); // อาจแสดงค่าขนาดเดิมที่ยังไม่อัปเดต
// ใช้ setTimeout เพื่อรอให้การเปลี่ยนแปลงของ DOM เสร็จสมบูรณ์
 setTimeout(() => {
    const updatedHeight = contentElement.offsetHeight;
    console.log('Updated Height:', updatedHeight); // แสดงค่าขนาดที่อัปเดตแล้ว
 }, 0); // หน่วงเวลาเป็น 0 milliseconds เพื่อให้การเปลี่ยนแปลง DOM เสร็จสมบูรณ์

คำอธิบาย

  • เมื่อเราเปลี่ยนแปลงเนื้อหาภายในของ element ทันทีแล้วอ่านค่าขนาด (offsetHeight หรือ offsetWidth) อาจจะได้ค่าที่ไม่ถูกต้อง เนื่องจากการเปลี่ยนแปลงของ DOM ยังไม่สมบูรณ์
  • การใช้ setTimeout แม้จะกำหนดเวลาเป็น 0 milliseconds แต่ช่วยให้การประมวลผล DOM เสร็จสิ้นก่อนที่จะอ่านค่าขนาดใหม่ ซึ่งจะได้ค่าที่ถูกต้องหลังจากการอัปเดต

การเลื่อนเวลาในการทำงานออก หรือการตั้งค่าการรอการตอบสนอง เพื่อให้แน่ใจว่าข้อมูลหรือขนาดของ element ที่ได้เป็นค่าที่ถูกต้องหลังจากการเปลี่ยนแปลง DOM