การอภิปรายสั้น ๆ เกี่ยวกับวิธีการอ้างอิงไฟล์ JS การดำเนินการแบบซิงโครนัสและการดำเนินการแบบอะซิงโครนัส

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-30 20:00:04

ไฟล์ js ใด ๆ ที่แนะนำใน AppendChild (ScriptNode) จะถูกเรียกใช้งานแบบอะซิงโครนัส (ScriptNode จำเป็นต้องแทรกลงในเอกสารเฉพาะการสร้างโหนดและการตั้งค่า SRC จะไม่โหลดไฟล์ JS ซึ่งแตกต่างจาก IMG และการโหลด)

รหัสในแท็ก <script> ในไฟล์ HTML หรือรหัสในไฟล์ JS ที่อ้างอิงโดย SRC ถูกโหลดและดำเนินการแบบซิงโครนัส

รหัสในแท็ก <script> ในไฟล์ HTML จะถูกเรียกใช้งานแบบอะซิงโครนัสโดยใช้วิธีการ Document.write ()

ไฟล์ JS ที่แนะนำโดยใช้ Method.Write () วิธีการแบบซิงโครนัสในรหัสของไฟล์ JS ที่อ้างอิงโดยแอตทริบิวต์ SRC ในไฟล์ HTML

 <script> // การโหลดแบบซิงโครนัสของรหัสที่ดำเนินการ </script>

 <script src = "xx.js"> </script> // โหลดแบบซิงโครนัสและเรียกใช้รหัสใน xx.js

 <script> document.write ('<script src = "xx.js"> <// script>'); // การโหลดแบบอะซิงโครนัสเพื่อเรียกใช้รหัสใน xx.js </script>

 <script src = "xx.js"> </script>

มีรหัสต่อไปนี้ใน xx.js:

 document.write ('<script src = "11.js"> <// script>'); document.write ('<script src = "22.js"> <// script>');

จากนั้น xx.js, 11.js และ 22.js จะถูกโหลดและดำเนินการพร้อมกัน

ถ้า xx.js ถูกโหลดแบบอะซิงโครนัสในการแทรก 11.js และ 22.js ยังคงโหลดแบบซิงโครนัส (ซิงโครนัสในอะซิงโครนัสนั่นคือการโหลดไฟล์ 2 ไฟล์เหล่านี้เป็นลำดับ)

การทดสอบ: ในการแจ้งเตือนใน 11, document.write () ใน 22 คุณจะเห็นว่าคำสั่งการเขียนใน 22 ถูกบล็อก

ด้วยวิธีต่อไปนี้ xx.js จะโหลดและดำเนินการแบบอะซิงโครนัสหลังจากภาคผนวกถูกดำเนินการ

 var script = document.createElement ("script"); script.setAttribute ("src", "xx.js"); documenrt.getElementByTagname ("head") [0] .AppendChild (สคริปต์);

ฟังก์ชั่นที่โหลดไฟล์ JS:

 var loadjs = function (url, callback) {var head = document.getElementByTagname ('head') [0], script = document.createElement ('สคริปต์'); script.src = url; script.type = "text/javascript"; head.appendchild (สคริปต์); script.onload = script.onreadyStateChange = function () {// แท็กสคริปต์มีเหตุการณ์ onreadyStateChange ภายใต้ IE, มาตรฐาน W3C มีเหตุการณ์ onload // readyStates เหล่านี้สำหรับ IE8 และต่ำกว่า, W3C มาตรฐานคือแท็กสคริปต์ไม่ได้ดำเนินการนี้ (! this.readyState) เป็นมาตรฐาน W3C IF ((! this.readyState) || this.readyState == "เสร็จสมบูรณ์" || this.readyState == "โหลด") {callback (); } else {Alert ("ไม่สามารถโหลดไฟล์ JS")}}}

สำหรับการทดสอบจุดที่ 4 (ที่การแจ้งเตือนการแทรกเป็นเรื่องง่ายที่จะเห็นการบล็อกระหว่างการโหลด)

tryjs.html

 <! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "tryjs.js" onload = "หาก (! onreadyStateChange = "console.log ('การเรียกกลับ js ด้านนอก', this.readystate, 'ie');"> </script> <body> </body> </html>

tryjs.js

 Console.log ('เขียนเริ่มต้น'); document.write ('<สคริปต์ src = "try.1.js" onreadyStateChange = "console.log (/' ไฟล์ 1 การเรียกกลับ/'นี่คือ {cornole.log /');r.}"><//script>'); document.write('<script src = "try.2.js" onreadystatechange = "console.log (/'ไฟล์ 2 callback /', this.readystate,/' ie/');" onload = "ถ้า! /');}"><//script>');console.log('Write เสร็จแล้ว ');

try.1.js

 console.log ('loadjs 1 เริ่มต้น'); console.log ('loadjs 1 เสร็จแล้ว');

try.2.js

 console.log ('loadjs 2 เริ่มต้น'); console.log ('loadjs 2 เสร็จสิ้น');

ผลการทดสอบ (การโทรกลับสมบูรณ์ของไฟล์ 2 และไฟล์ 1 ไม่แน่นอนในคำสั่ง IE7/8/9)

คือ 7:

บันทึก: การโหลดการโทรกลับ js ด้านนอกเช่น
บันทึก: การโทรกลับ js ด้านนอกโหลดเช่น
บันทึก: เริ่มเขียน
บันทึก: เขียนเสร็จแล้ว
บันทึก: การโทรกลับ js ด้านนอกเสร็จสมบูรณ์เช่น
บันทึก: ไฟล์ 1 การโทรกลับการโหลดเช่น
บันทึก: ไฟล์ 2 การโทรกลับการโหลดเช่น
บันทึก: LOADJS 1 เริ่มต้น
บันทึก: LOADJS 1 เสร็จแล้ว
บันทึก: LOADJS 2 เริ่มต้น
บันทึก: LOADJS 2 เสร็จแล้ว
บันทึก: ไฟล์ 2 การโทรกลับเสร็จสมบูรณ์เช่น
บันทึก: ไฟล์ 1 การโทรกลับเสร็จสมบูรณ์เช่น

IE8:

IE9:

บันทึก: เริ่มเขียน
บันทึก: เขียนเสร็จแล้ว
บันทึก: การโทรกลับ js ด้านนอกเสร็จสมบูรณ์เช่น
บันทึก: ไฟล์ 1 การโทรกลับการโหลดเช่น
บันทึก: ไฟล์ 2 การโทรกลับการโหลดเช่น
บันทึก: LOADJS 1 เริ่มต้น
บันทึก: LOADJS 1 เสร็จแล้ว
บันทึก: LOADJS 2 เริ่มต้น
บันทึก: LOADJS 2 เสร็จแล้ว
บันทึก: ไฟล์ 1 การโทรกลับเสร็จสมบูรณ์เช่น
บันทึก: ไฟล์ 2 การโทรกลับเสร็จสมบูรณ์เช่น

Firefox:

เริ่มเขียน
เขียนเสร็จแล้ว
การโทรกลับ js ด้านนอกไม่ใช่เช่น
LOADJS 1 เริ่มต้น
loadjs 1 เสร็จแล้ว
ไฟล์ 1 โทรกลับไม่ใช่เช่น
LOADJS 2 เริ่มต้น
LOADJS 2 เสร็จแล้ว
ไฟล์ 2 การโทรกลับไม่ใช่เช่น

Chrome:

ข้างต้นคือการอภิปรายสั้น ๆ เกี่ยวกับวิธีการอ้างอิงไฟล์ JS และการดำเนินการแบบซิงโครนัสและการดำเนินการแบบอะซิงโครนัสที่ตัวแก้ไขนำมาให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคนและสนับสนุน wulin.com เพิ่มเติม ~