วิธีตั้งค่าให้สคริปต์ทำงานแบบอะซิงโครนัส (Asynchronously) ใน HTML

ใช้แอตทริบิวต์ async เพื่อตั้งค่าให้สคริปต์ทำงานแบบอะซิงโครนัส (asynchronously) เมื่อไฟล์พร้อม ทำงานได้เฉพาะกับสคริปต์ภายนอก (external script) เท่านั้น

ขั้นตอน

ขั้นแรก สร้างไฟล์ JS ชื่อ new.js:

function sayHello() { 
  alert("Hello World") 
}

จากนั้นเพิ่มโค้ด HTML และเรียกใช้สคริปต์ข้างต้น:

<html> 
  <head> 
    <script src="new.js" async></script> 
  </head> 
  <body> 
    <p>นี่คือข้อความสาธิต</p> 
  </body> 
</html>

ความแตกต่างระหว่าง async และ defer:

• async - ดาวน์โหลดและรันทันทีที่พร้อม ไม่รอ HTML parsing จบ ลำดับการรันไม่แน่นอน
• defer - ดาวน์โหลดพร้อมกัน แต่รันหลัง HTML parsing จบ และรันตามลำดับ

ใช้ async สำหรับสคริปต์อิสระ (analytics, ads) ใช้ defer สำหรับสคริปต์ที่ต้องพึ่งพา DOM