你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用
更新時間：2013年04月23日 09:59:57 作者：
本篇文章小編為大家介紹，你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用。需要的朋友參考下
復(fù)制代碼 代碼如下:
var intervalBody = function(){
console.log('interval');
}
var startInterval = function(){
setInterval(intervalBody,1000);
}
var timeoutBody = function(){
console.log('timeout');
}
var startTimeout = function(){
setTimeout(timeoutBody,1000);
}
var sleep = function(second){
var current = new Date().setSeconds(new Date().getSeconds() + second);
while(new Date() < current){ }
}
startInterval();
startTimeout();
sleep(2);
console.log('sleep once');
sleep(2);
console.log('sleep again');
執(zhí)行結(jié)果
事件驅(qū)動的單線程模型，所有javascript的代碼都在一個線程中執(zhí)行，javascript線程從事件隊列中一次取出一個事件進(jìn)行執(zhí)行。
規(guī)則2宿主中除了javascript線程外，還有定時器線程（setInterval和setTimeout會觸發(fā)這兩個線程執(zhí)行）、瀏覽器事件觸發(fā)線程（這個線程會觸發(fā)onclick、onmousemove和其它瀏覽器事件）、AJAX請求線程；所有這些線程觸發(fā)的事件（回調(diào)）都會加入到事件隊列的尾部。
規(guī)則3當(dāng)瀏覽器加載完html文檔后，會將當(dāng)前html的所有的js代碼作為事件隊列的第一個事件，其它線程觸發(fā)的事件（回調(diào)）都會加入到事件隊列的尾部。
setTimeout和setInterval中的回調(diào)的執(zhí)行時間肯定是大于為其指定的秒數(shù)。
瀏覽器渲染線程假如javascript執(zhí)行線程執(zhí)行了A事件，在A事件執(zhí)行的過程中修改了DOM，這些DOM的修改不會立即反應(yīng)到界面上，而是當(dāng)A事件執(zhí)行完畢后，javascript線程會被阻塞，這時瀏覽器渲染線程會渲染DOM的修改結(jié)果，等瀏覽器渲染線程執(zhí)行完畢后，javascript線程才繼續(xù)運(yùn)行。
代碼示例
復(fù)制代碼 代碼如下:
var sleep = function(second){
var current = new Date().setSeconds(new Date().getSeconds() + second);
while(new Date() < current){ }
}
document.body.innerHTML = '段光偉';
sleep(5);
相關(guān)文章
前后臺用js傳參過程中,如果是中文就容易出現(xiàn)亂碼,下面這篇文章主要給大家介紹了關(guān)于js解決url傳遞中文參數(shù)亂碼問題的的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
本文為大家介紹下如何使用js捕獲鼠標(biāo)滾輪事件，原理很簡單，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)拖拽功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家介紹了javascript跑馬燈抽獎特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
window.open不被攔截的簡單實現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄獁indow.open不被攔截的簡單實現(xiàn)代碼(推薦) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全，涉及到altkey和event屬性語法定義及用法，本文介紹的非常詳細(xì)，感興趣的朋友一起看看吧2015-11-11
原生JavaScript實現(xiàn)精美的淘寶輪播圖效果示例【附demo源碼下載】
這篇文章主要介紹了原生JavaScript實現(xiàn)精美的淘寶輪播圖效果,結(jié)合完整實例形式詳細(xì)分析了javascript實現(xiàn)淘寶輪播圖功能的相關(guān)HTML布局、css及js核心功能代碼,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
棧內(nèi)存主要用于存儲各種基本類型的變量，包括Boolean、Number、String、Undefined、Null，以及對象變量的指針（地址值），這篇文章主要介紹了JS堆棧內(nèi)存的運(yùn)行機(jī)制,需要的朋友可以參考下2022-06-06
window.name代替cookie的實現(xiàn)代碼
window.name代替cookie的實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
在開發(fā)項目的過程中，我們經(jīng)常會需要關(guān)于javascript數(shù)組的一些算法，比方說數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個人的匯總整理的算法分享給大家。2016-02-02