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

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);

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