事件處理機(jī)制--瀏覽器流程處理分析

js的運(yùn)行是單線(xiàn)程的，單線(xiàn)程即一個(gè)時(shí)間只能做一件事。瀏覽器的運(yùn)行是多線(xiàn)程的。

如下三種情況會(huì)進(jìn)入事件隊(duì)列（任務(wù)隊(duì)列）中，但不立即執(zhí)行：

　　1．定時(shí)函數(shù)

　　2．事件函數(shù)

　　3．ajax的回調(diào)函數(shù)（xhr.onreadystatechange = function(){}; ?//會(huì)調(diào)用多次）

主線(xiàn)程中先執(zhí)行非事件隊(duì)列函數(shù)，再執(zhí)行事件隊(duì)列函數(shù)，事件隊(duì)列中的事件先進(jìn)去的先被判斷，但不一定先被執(zhí)行。事件隊(duì)列中誰(shuí)先滿(mǎn)足條件先執(zhí)行誰(shuí)。

事件隊(duì)列中的任務(wù)執(zhí)行是有條件的：(前提條件：主線(xiàn)程必須是空閑的)

　　1．定時(shí)函數(shù)的觸發(fā)條件（到達(dá)延時(shí)事件）（延時(shí)時(shí)間不精確）定時(shí)器從放入隊(duì)列時(shí)開(kāi)始計(jì)時(shí)，超時(shí)的定時(shí)函數(shù)優(yōu)先執(zhí)行

　　2．事件函數(shù)的觸發(fā)條件（特定的事件發(fā)生）

　　3．Ajax回調(diào)函數(shù)的觸發(fā)條件（服務(wù)器有數(shù)據(jù)響應(yīng)時(shí)觸發(fā)：xhr.readyState狀態(tài)發(fā)生變化時(shí)觸發(fā)）

事件隊(duì)列中的任務(wù)先進(jìn)先出

先進(jìn)先出：優(yōu)先被判斷，但不一定優(yōu)先被執(zhí)行?

舉例說(shuō)明：

1. 定時(shí)函數(shù)：

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

所以以上代碼的輸出結(jié)果為：

　　1
　　4950
　　3
　　2

2. 事件函數(shù)

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

運(yùn)行后點(diǎn)擊按鈕，輸出結(jié)果為：　

　　1
　　3
　　2

3. Ajax回調(diào)函數(shù)

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先輸出才執(zhí)行函數(shù),所以應(yīng)使用回調(diào)函數(shù)實(shí)現(xiàn) console.log(3);

轉(zhuǎn)載于:https://www.cnblogs.com/-lizi/p/7098183.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。