在第 3 部分中，我們討論了異步回調。 回顧一下，我們使用瀏覽器的幫助來給人一種 是異步的錯覺。 () 是瀏覽器全局對象的一部分，它允許我們產生同步 代碼是異步的錯覺。 圖1。
阻塞代碼
假設我們有一個帶有單個按鈕的精美褲子網頁。我們永遠不知道用戶何時會點擊該按鈕。可能是現在，也可能是幾個小時后。我們只是不知道。因為 是同步的，這意味著頁面只是坐在那里等待按鈕被點擊。它掛起。無法繼續執行下一行代碼 — 直到單擊按鈕。這就是所謂的阻塞代碼。在按下按鈕之前，一切都被阻止。
阻塞代碼：在其他代碼完成之前，代碼無法執行
要觀察類似的阻塞行為，請在控制臺中鍵入 alert()。圖 2 — alert() 方法是一種同步瀏覽器方法網頁單個按鈕圖片素材，它完全阻止所有內容，直到用戶關閉對話框。從用戶的角度來看，阻塞代碼是可怕的，通常是最壞的情況。用戶不能對頁面做任何事情。它被封鎖了！他們不能滾動、放大、單擊按鈕、發送消息、單擊喜歡。該頁面實際上已經死了！
那么瀏覽器如何防止阻塞代碼呢？換句話說，它如何改進 的同步執行模型？瀏覽器為我們提供了異步方法作為其 web-apis 的一部分。我們使用這些異步方法將事件偵聽器添加到按鈕或元素。事件偵聽器異步等待，直到單擊按鈕。然后它執行一些代碼來響應點擊。這樣，網頁就可以自由地做其他有用的事情了。有許多類型的事件偵聽器網頁單個按鈕圖片素材，例如在單擊鼠標或加載頁面時觸發的事件。
讓我們看一個事件監聽器的例子。將圖 3 中的代碼輸入 Web 瀏覽器的控制臺，然后按 Enter。現在單擊控制臺左側白色文檔內的任意位置。觀察文檔顏色如何從白色變為紅色。圖 4. 我的朋友們，這是異步 的作用。我們正在做的是監聽文檔正文上的單擊事件，當該事件發生時，我們將文檔的 CSS 背景顏色屬性更改為紅色。此外，請注意瀏覽器如何將正文樣式異步更改為 。圖 5
現在我們對為什么阻塞代碼不好而異步代碼好的原因有了更好的理解，讓我們在第 5 部分中讓您稍微了解一下事件循環。 了解事件循環將使這些概念更加深入人心。 一旦你完全理解了事件循環，你將為成為世界級的異步程序員奠定基礎。
圖 6 顯示了 事件循環的高級概述。