ทำไมคุณถึงต้องการแบบอะซิงโครนัส? ทำไม มาดูโค้ด
คำถามที่ 1:
สำหรับ (var i = 0; i <100000; i ++) {} Alert ('Hello World !!!');รหัสนี้หมายถึงการดำเนินการ 100 ครั้งก่อนที่จะดำเนินการแจ้งเตือน ปัญหาที่เกิดขึ้นคือมันบล็อกการดำเนินการของรหัสที่ตามมาอย่างจริงจัง สำหรับสาเหตุที่ส่วนใหญ่เป็นเพราะ JS เป็นเธรดเดี่ยว
คำถามที่ 2:
เรามักจะต้องแก้ปัญหานี้ หากเราต้องการเพิ่มรหัสสคริปต์ลงในหัวเราจะเขียนโค้ดใน window.onload (หากใช้งาน DOM) คุณเคยคิดบ้างไหมว่าทำไมเราต้องเพิ่ม window.onload ? เหตุผลก็คือเมื่อคุณใช้งาน DOM เบราว์เซอร์รหัส HTML ที่อยู่เบื้องหลังสคริปต์ไม่ได้เริ่มโหลด แต่คุณคิดว่าจะแต่งงานกับเธอก่อนที่เธอจะเกิด เป็นไปได้ไหม แน่นอนว่าเป็นไปไม่ได้เพิ่มหน้าต่าง เหตุผลที่ onload อาจเป็นเพราะรหัสใน window.onload ถูกเรียกใช้งานหลังจากที่มีการโหลดเอกสารอย่างสมบูรณ์ซึ่งเทียบเท่ากับอะซิงโครนัส
คำถามที่ 3:
บางครั้งหน้าไม่จำเป็นต้องโหลดรหัสทั้งหมดในครั้งเดียว แต่บ่อยครั้งที่เราโหลดรหัสบางชิ้นตามข้อกำหนดที่แน่นอน
กระทู้เดี่ยวคืออะไร?
คุณสามารถเข้าใจด้วยวิธีนี้ว่าเธรดเดียวคือการดำเนินการของกลุ่มโค้ดก่อนที่จะดำเนินการก่อนหน้านี้ก่อนจากนั้นเรียกใช้งานถัดไปหลังจากที่หนึ่งก่อนหน้านี้เสร็จสมบูรณ์
แล้ว js ใดเป็นแบบอะซิงโครนัส?
ฉันเชื่อว่าสิ่งนี้เกือบจะใช้ไม่ดี มันเป็น settimeout/setInterval และแน่นอน Ajax ฉันเชื่อว่าทุกคนรู้ว่า Ajax assynchronous แน่นอนว่ามันสามารถซิงโครนัสได้ แต่ไม่มีใครทำเช่นนั้น อย่างไรก็ตามเพื่อนบางคนอาจไม่รู้แตกต่างกันเกี่ยวกับการตั้งถิ่นฐานและ setInterval เป็นแบบอะซิงโครนัส มาพูดกันว่าทำไม Settimeout จึงเป็นแบบอะซิงโครนัส
settimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0) หลังจากเรียกใช้รหัสนี้พิมพ์ครั้งแรก 1 แทน 0 เพื่อนบางคนเริ่มสับสนหรือไม่? แม้ว่าเราจะตั้งค่า Settimeout เพื่อเรียกใช้ console.log(0) หลังจาก 0 วินาที แต่การตั้งถิ่นฐานนั้นพิเศษมากเพราะมันเป็นแบบอะซิงโครนัส มากันเถอะว่าทำไมการพิมพ์ถึง 1 แล้ว 0 มาพูดคุยกันว่าอะไรคืออะซิงโครนัส
แบบอะซิงโครนัสคืออะไร?
ตัวอย่างเช่นในร้านอาหารบางแห่งคุณต้องทำการจองล่วงหน้าและคุณสามารถไปได้ก็ต่อเมื่อคนอื่นกินเสร็จ ดังนั้นเมื่อคนอื่นกินคุณสามารถทำสิ่งอื่น ๆ ได้ เมื่อคนอื่นกินเสร็จแล้วใครบางคนจะแจ้งให้คุณทราบเพื่อที่คุณจะได้ไป สำหรับรหัสเช่น AJAX คุณกำหนดวิธีการโทรกลับ วิธีการโทรกลับนี้จะไม่ถูกดำเนินการในเวลานั้น แต่จะรอให้การตอบกลับเซิร์ฟเวอร์เสร็จสมบูรณ์ก่อนที่จะดำเนินการรหัสนี้
กลับไปที่ส่วนก่อนหน้าของ Settimeout มันใช้งานได้เช่นนี้ จากช่วงเวลาที่คุณกำหนด settimeout (ไม่ว่าเวลาจะเป็น 0 หรือไม่), JS จะไม่เรียกใช้รหัสนี้โดยตรง แต่จะโยนมันลงในคิวเหตุการณ์ หลังจากทำงานการซิงโครไนซ์ทั้งหมดในหน้าเสร็จแล้วรหัสในคิวเหตุการณ์จะถูกดำเนินการ การซิงโครไนซ์คืออะไร? นอกเหนือจากรหัสแบบอะซิงโครนัสมันคือการซิงโครไนซ์ -_-
วิธีการใช้ asynchronous js?
1. ใช้ Settimout เพื่อให้ได้อะซิงโครนัส
settimeout (function () {console.log (document.getElementByTagname ('body') [0]);}, 0)แต่มีปัญหาเล็ก ๆ น้อย ๆ กับ Settimeout ซึ่งเป็นเวลาที่ไม่ถูกต้อง หากคุณต้องการเรียกใช้รหัสนี้เร็วขึ้นเราสามารถใช้ฟังก์ชั่นที่จัดทำโดย HTML5
RequestanimationFrame (function () {console.log (document.getElementByTagname ('body') [0]);})ความแตกต่างระหว่าง RequestAnimationFrame และ SettimeOut คือ การร้องขอ Frame นั้นดำเนินการเร็วกว่า SettimeOut หลายคนใช้ RequestAnationFrame เพื่อสร้างภาพเคลื่อนไหว
2. สร้างแท็กสคริปต์แบบไดนามิก
var head = document.getElementByTagname ('head') [0]; var script = document.createElement ('script'); script.src = 'mengzhuzi.js'; head.appendchild ('สคริปต์');3. ใช้การเลื่อน/async ที่จัดทำโดยสคริปต์
<script src = "xx.js" defer> </script>
Defer: รหัสนี้จะดำเนินการเฉพาะหลังจากโหลดหน้าเว็บเท่านั้น
<script src = "xx.js" async> </script>
async: เรียกใช้รหัสสคริปต์แบบอะซิงโครนัส
อย่างไรก็ตามอะซิงโครนัสก็เป็นข้อเสียเช่นรหัสต่อไปนี้:
รหัสปกติ:
ลอง {โยนข้อผิดพลาดใหม่ ('hello world');} catch (err) {console.log (err);} // ข้อผิดพลาด: Hello World (…)รหัสแบบอะซิงโครนัส:
ลอง {settimout (function () {โยนข้อผิดพลาดใหม่ ('hello world');}, 0)} catch (err) {console.log (err);} // referenceRoror: setTimout ไม่ได้กำหนด (…)จะพบได้ว่ารหัสในการจับไม่ได้ดำเนินการซึ่งหมายความว่าการลองไม่สามารถจับรหัสในอะซิงโครนัสได้
สรุป
อะซิงโครนัสใน JS และวิธีการบรรลุเป้าหมายนี้เป็นไปโดยทั่วไป มันเป็นความคิดโบราณเกี่ยวกับ js asynchronous แต่ฉันก็ยังหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคน