事件處理機制--瀏覽器流程處理分析

js的運行是單線程的，單線程即一個時間只能做一件事。瀏覽器的運行是多線程的。

如下三種情況會進入事件隊列（任務隊列）中，但不立即執行：

　　1．定時函數

　　2．事件函數

　　3．ajax的回調函數（xhr.onreadystatechange = function(){}; ?//會調用多次）

主線程中先執行非事件隊列函數，再執行事件隊列函數，事件隊列中的事件先進去的先被判斷，但不一定先被執行。事件隊列中誰先滿足條件先執行誰。

事件隊列中的任務執行是有條件的：(前提條件：主線程必須是空閑的)

　　1．定時函數的觸發條件（到達延時事件）（延時時間不精確）定時器從放入隊列時開始計時，超時的定時函數優先執行

　　2．事件函數的觸發條件（特定的事件發生）

　　3．Ajax回調函數的觸發條件（服務器有數據響應時觸發：xhr.readyState狀態發生變化時觸發）

事件隊列中的任務先進先出

先進先出：優先被判斷，但不一定優先被執行?

舉例說明：

1. 定時函數：

<script type="text/javascript">console.log(1);setTimeout(function(){console.log(2);}, 0); //0表示以最小延時去執行var sum = 0;for(var i = 0; i < 100; i++) {sum += i;}console.log(sum);console.log(3); </script>

所以以上代碼的輸出結果為：

　　1
　　4950
　　3
　　2

2. 事件函數

<input type="button" value="按鈕" id="btn"><script type="text/javascript">var btn = document.getElementById('btn');console.log(1);btn.onclick = function(){console.log(2);}console.log(3); </script>

運行后點擊按鈕，輸出結果為：　

　　1
　　3
　　2

3. Ajax回調函數

var xhr = new XHLHttpRequest(); xhr.open(); xhr.send(); console.log(1); var data = null; xhr.onreadystatechange = function(){console.log(2);data = xhr.responseText; } console.log(data); // data先輸出才執行函數,所以應使用回調函數實現 console.log(3);

轉載于:https://www.cnblogs.com/-lizi/p/7098183.html

總結

以上是生活随笔為你收集整理的事件处理机制--浏览器流程处理分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。