快捷導(dǎo)航

你必須知道的Javascript知識(shí)點(diǎn)之"單線程事件驅(qū)動(dòng)"的使用

更新時(shí)間：2013年04月23日 09:59:57 作者：

本篇文章小編為大家介紹，你必須知道的Javascript知識(shí)點(diǎn)之"單線程事件驅(qū)動(dòng)"的使用。需要的朋友參考下

 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é)果

發(fā)生了什么事情

執(zhí)行規(guī)則規(guī)則1

事件驅(qū)動(dòng)的單線程模型，所有javascript的代碼都在一個(gè)線程中執(zhí)行，javascript線程從事件隊(duì)列中一次取出一個(gè)事件進(jìn)行執(zhí)行。

規(guī)則2

宿主中除了javascript線程外，還有定時(shí)器線程（setInterval和setTimeout會(huì)觸發(fā)這兩個(gè)線程執(zhí)行）、瀏覽器事件觸發(fā)線程（這個(gè)線程會(huì)觸發(fā)onclick、onmousemove和其它瀏覽器事件）、AJAX請(qǐng)求線程；所有這些線程觸發(fā)的事件（回調(diào)）都會(huì)加入到事件隊(duì)列的尾部。

規(guī)則3

當(dāng)瀏覽器加載完html文檔后，會(huì)將當(dāng)前html的所有的js代碼作為事件隊(duì)列的第一個(gè)事件，其它線程觸發(fā)的事件（回調(diào)）都會(huì)加入到事件隊(duì)列的尾部。

規(guī)則4

setTimeout和setInterval中的回調(diào)的執(zhí)行時(shí)間肯定是大于為其指定的秒數(shù)。

瀏覽器渲染線程

假如javascript執(zhí)行線程執(zhí)行了A事件，在A事件執(zhí)行的過程中修改了DOM，這些DOM的修改不會(huì)立即反應(yīng)到界面上，而是當(dāng)A事件執(zhí)行完畢后，javascript線程會(huì)被阻塞，這時(shí)瀏覽器渲染線程會(huì)渲染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);

您可能感興趣的文章: