ทำความเข้าใจกับ JavaScript แบบซิงโครนัสและอะซิงโครนัส - ส่วนที่ 1

พร้อมกัน และ ไม่ตรงกัน แนวคิดที่สับสนใน JavaScript โดยเฉพาะสำหรับผู้เริ่มต้น สองอย่างหรือมากกว่านั้นคือ พร้อมกัน เมื่อพวกเขา เกิดขึ้นในเวลาเดียวกัน (กำลังซิงค์) และ แบบอะซิงโครนัสเมื่อไม่มี (ไม่ซิงค์).

แม้ว่าคำจำกัดความเหล่านี้จะใช้ง่าย แต่จริงๆแล้วมันซับซ้อนกว่าที่เห็น เราต้องคำนึงถึง สิ่งที่ตรงกัน, และ อะไรนะ.

คุณอาจจะเรียก ปกติ ใน JavaScript ซิงโครนัสใช่มั้ย และถ้ามันเป็นสิ่งที่ชอบ setTimeout () หรือ AJAX ที่คุณทำงานด้วยคุณจะอ้างว่าเป็นแบบอะซิงโครนัสใช่ไหม ถ้าฉันบอกคุณ ทั้งสอง ไม่ตรงกันในทางใดทางหนึ่ง?

เพื่ออธิบาย ทำไม, เราต้องหันไปหา Mr X เพื่อขอความช่วยเหลือ.

สถานการณ์ที่ 1 - นาย X กำลังพยายามซิงโครไนซ์

นี่คือการตั้งค่า:

1. Mr X เป็นคนที่สามารถตอบคำถามที่ยากลำบากและดำเนินงานตามที่ร้องขอ.
2. วิธีเดียวที่จะติดต่อกับเขาคือการโทรศัพท์.
3. ไม่ว่าคุณจะมีคำถามหรือภาระงานอะไรก็ตามเพื่อขอความช่วยเหลือจากนายเอ็กซ์ คุณเรียกเขาว่า.
4. Mr X ให้คำตอบหรือทำภารกิจให้สำเร็จ ทันที, และช่วยให้คุณรู้ว่า มันจบแล้ว.
5. คุณวางผู้รับความรู้สึกพอใจและออกไปดูหนัง.

สิ่งที่คุณเพิ่งจะทำคือ การสื่อสารแบบซิงโครนัส (ไปมา) กับ Mr X. เขาฟังขณะที่คุณถามคำถามของคุณและคุณฟังเมื่อเขาตอบคำถาม.

สถานการณ์ที่ 2 - นาย X ไม่มีความสุขกับความบังเอิญ

เนื่องจาก Mr X มีประสิทธิภาพมากเขาจึงเริ่มรับสายมากขึ้น ดังนั้นจะเกิดอะไรขึ้นเมื่อคุณเรียกเขาว่า เขายุ่งอยู่แล้ว กำลังพูดกับคนอื่น? คุณจะไม่สามารถถามคำถามกับเขาได้จนกว่าเขาจะมีอิสระที่จะรับสายของคุณ สิ่งที่คุณจะได้ยินคือเสียงที่ไม่ว่าง.

ดังนั้นสิ่งที่นายเอ็กซ์จะทำเพื่อต่อสู้กับเรื่องนี้?

แทนที่จะรับสายโดยตรง:

1. Mr X จ้างคนใหม่ Mr M และมอบเครื่องตอบรับโทรศัพท์ให้เขา เพื่อฝากข้อความ.
2. งานของนายเอ็มคือการ ส่งต่อข้อความ จากเครื่องตอบรับถึง Mr X เมื่อเขารู้ว่า Mr X ได้ทำการประมวลผลข้อความก่อนหน้านี้ทั้งหมดแล้วและได้เสร็จสิ้นแล้ว อิสระที่จะรับใหม่.
3. ดังนั้นเมื่อคุณโทรหาเขาแทนที่จะรับน้ำเสียงไม่ว่างคุณจะได้รับข้อความจากคุณเอ็กซ์จากนั้น รอให้เขาโทรกลับหาคุณ (ยังไม่มีเวลาชมภาพยนตร์).
4. เมื่อ Mr X ทำกับข้อความที่อยู่ในคิวทั้งหมดที่เขาได้รับก่อนที่คุณจะได้รับเขาจะตรวจสอบปัญหาของคุณและ โทรกลับหาคุณ เพื่อให้คำตอบ.

ตอนนี้คำถามอยู่ที่นี่: มีการกระทำเพื่อให้ห่างไกล แบบซิงโครนัสหรือแบบอะซิงโครนัส?

มันผสม เมื่อคุณออกจากข้อความ, Mr X ไม่ได้ฟังมันดังนั้นการสื่อสารที่สี่จึงเป็นแบบอะซิงโครนัส.

แต่เมื่อเขาตอบ, คุณอยู่ที่นั่นฟัง, ที่ ทำให้การสื่อสารกลับมาซิงโครนัส.

ฉันหวังว่าตอนนี้คุณจะได้รับความเข้าใจที่ดีขึ้นเกี่ยวกับวิธีการรับรู้ถึงความสัมพันธ์ในแง่ของการสื่อสาร ได้เวลานำ JavaScript เข้ามา.

JavaScript - ภาษาการเขียนโปรแกรมแบบอะซิงโครนัส

เมื่อมีคนติดป้ายกำกับ JavaScript แบบไม่ตรงกันสิ่งที่พวกเขาอ้างถึงโดยทั่วไปคือวิธีที่คุณทำได้ ฝากข้อความ สำหรับมันและ ไม่มีการโทรของคุณถูกปิดกั้น ด้วยน้ำเสียงไม่ว่าง.

การเรียกฟังก์ชั่นคือ ไม่เคยโดยตรงใน JavaScript, พวกเขากำลังทำอย่างแท้จริง ผ่านข้อความ.

จาวาสคริปต์ใช้ คิวข้อความ ที่มีข้อความเข้ามา (หรือเหตุการณ์) เหตุการณ์ห่วง (โปรแกรมเลือกจ่ายงานข้อความ) ส่งข้อความเหล่านั้นไปยัง a สแตกการโทร ที่ฟังก์ชั่นที่สอดคล้องกันของข้อความอยู่ ซ้อนกันเป็นเฟรม (ฟังก์ชั่นการโต้แย้งและตัวแปร) สำหรับการดำเนินการ.

สแตกการเรียกเก็บเฟรมของฟังก์ชันเริ่มต้นที่ถูกเรียกและเฟรมอื่น ๆ สำหรับฟังก์ชั่นที่เรียกว่า ผ่านการโทรซ้อน ด้านบนของมัน .

เมื่อข้อความเข้าร่วมคิวมันจะรอจนกว่าสแต็คการโทรจะเป็น ไม่มีเฟรมทั้งหมดจากข้อความก่อนหน้า, และเมื่อมันเป็นเหตุการณ์วง dequeues ข้อความก่อนหน้า, และเพิ่มเฟรมที่เกี่ยวข้องของข้อความปัจจุบันใน call stack.

ข้อความจะรออีกครั้งจนกว่าจะมีการโทรซ้อน ไม่มีเฟรมที่เกี่ยวข้องของตัวเอง (เช่นการประมวลผลของฟังก์ชั่นสแต็กทั้งหมดจบลง) จากนั้นจะถูกตัดออก.

พิจารณารหัสต่อไปนี้:

 ฟังก์ชั่น foo ()  ฟังก์ชั่นบาร์ () foo ();  ฟังก์ชัน baz () bar ();  baz (); 

ฟังก์ชั่นที่กำลังทำงานอยู่คือ baz () (ที่แถวสุดท้ายของข้อมูลโค้ด) ซึ่ง ข้อความถูกเพิ่มในคิว, และเมื่อวงเหตุการณ์หยิบขึ้นมาสแตกการโทร เริ่มเฟรมซ้อน สำหรับ baz (), บาร์(), และ foo () ที่จุดที่เกี่ยวข้องของการดำเนินการ.

เมื่อการดำเนินการของฟังก์ชั่นเสร็จสมบูรณ์หนึ่งโดยหนึ่งเฟรมของพวกเขาคือ ถูกลบออกจาก call stack, ในขณะที่ข้อความคือ ยังคงรออยู่ในคิว, จนกระทั่ง baz () ถูกดึงจากสแต็ก.

โปรดจำไว้ว่าการเรียกใช้ฟังก์ชันคือ ไม่เคยโดยตรงใน JavaScript, พวกเขากำลังทำ ผ่านข้อความ. ดังนั้นเมื่อใดก็ตามที่คุณได้ยินคนพูดว่า JavaScript เองเป็นภาษาการเขียนโปรแกรมแบบอะซิงโครนัสสมมติว่าพวกเขากำลังพูดถึงในตัว “เครื่องตอบคำถาม”, และคุณมีอิสระที่จะฝากข้อความอย่างไร.

แต่สิ่งที่เกี่ยวกับวิธีการแบบอะซิงโครนัสเฉพาะ?

จนถึงตอนนี้ฉันยังไม่ได้สัมผัสกับ API เช่น setTimeout () และ AJAX นั่นคือสิ่งที่เป็น เรียกว่าแบบอะซิงโครนัสโดยเฉพาะ. ทำไมเป็นอย่างนั้น?

เป็นสิ่งสำคัญที่จะต้องเข้าใจว่าอะไรคือสิ่งที่ถูกซิงโครนัสหรือไม่ตรงกัน JavaScript ด้วยความช่วยเหลือของเหตุการณ์และวงเหตุการณ์อาจฝึกฝน การประมวลผลข้อความแบบอะซิงโครนัส, แต่นั่น ไม่ได้หมายความว่า ทุกอย่าง ใน JavaScript เป็นแบบอะซิงโครนัส.

โปรดจำไว้ว่าฉันบอกคุณว่าข้อความไม่ได้ถูกทิ้งไว้จนกว่าจะมีการโทรซ้อน ไม่มีเฟรมที่สอดคล้องกัน, เหมือนที่คุณไม่ได้ออกไปดูหนังจนกว่าคุณจะได้รับคำตอบนั่นคือ กำลังซิงโครนัส, คุณอยู่ที่นั่นรอ จนกว่างานจะเสร็จสมบูรณ์, และคุณจะได้คำตอบ.

ที่รอคอย ไม่เหมาะในทุกสถานการณ์. ถ้าหลังจากฝากข้อความแทนที่จะรอคุณสามารถออกจากภาพยนตร์ได้ไหม จะเกิดอะไรขึ้นถ้าฟังก์ชั่นสามารถออกจากตำแหน่ง (การล้าง call stack) และข้อความสามารถถูก dequeued ก่อนที่งานของฟังก์ชันจะเสร็จสมบูรณ์? จะทำอย่างไรถ้าคุณสามารถเรียกใช้โค้ดแบบอะซิงโครนัสได้?

นี่คือที่ API เช่น setTimeout () และ AJAX เข้ามาในภาพและสิ่งที่พวกเขาทำคือ…ยึดไว้ฉันไม่สามารถอธิบายสิ่งนี้ได้หากไม่กลับไปที่คุณ X ซึ่งเราจะเห็นในส่วนที่สองของบทความนี้ คอยติดตาม.