快捷導(dǎo)航

深入探尋javascript定時(shí)器

更新時(shí)間：2015年01月02日 10:10:38 投稿：hebedich

這篇文章主要介紹了深入探尋javascript定時(shí)器，十分的詳盡，十分全面,需要的朋友可以參考下

javascript單線程

JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來很復(fù)雜的同步問題。比如，假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成了這門語言的核心特征，將來也不會(huì)改變。

隊(duì)列任務(wù)

單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長，后一個(gè)任務(wù)就不得不一直等著。

異步事件驅(qū)動(dòng)

瀏覽器中很多行為是異步（Asynchronized）的，例如：鼠標(biāo)點(diǎn)擊事件、窗口大小拖拉事件、定時(shí)器觸發(fā)事件、XMLHttpRequest完成回調(diào)等。當(dāng)一個(gè)異步事件發(fā)生的時(shí)候，它就進(jìn)入事件隊(duì)列。瀏覽器有一個(gè)內(nèi)部大消息循環(huán)，Event Loop（事件循環(huán)），會(huì)輪詢大的事件隊(duì)列并處理事件。例如，瀏覽器當(dāng)前正在忙于處理onclick事件，這時(shí)另外一個(gè)事件發(fā)生了（如：window onSize），這個(gè)異步事件就被放入事件隊(duì)列等待處理，只有前面的處理完畢了，空閑了才會(huì)執(zhí)行這個(gè)事件。

Event Loop

JavaScript是單線程的,但瀏覽器不是單線程的

瀏覽器至少會(huì)有以下一些進(jìn)程

1.瀏覽器 GUI 渲染線程

2.JavaScript 引擎線程

3.瀏覽器定時(shí)觸發(fā)器線程

4.瀏覽器事件觸發(fā)線程

5.瀏覽器 http 異步請(qǐng)求線程

因?yàn)?JavaScript 引擎是單線程的，所以代碼都是先壓到隊(duì)列，然后由引擎采用先進(jìn)先出的方式運(yùn)行。事件處理函數(shù)、timer 執(zhí)行函數(shù)也會(huì)排到這個(gè)隊(duì)列中，然后利用一個(gè)無窮回圈，不斷從隊(duì)頭取出函數(shù)執(zhí)行，這個(gè)就是Event Loop。

總結(jié)一句話,js是單線程的,但是瀏覽器是多線程的,遇到異步的東西都是由瀏覽器把異步的回調(diào)放到Event Loop中，js線程不繁忙的時(shí)候,再去讀取Event Loop

定時(shí)器原理

定時(shí)器的用法

setTimeout(fn, delay)

setInterval(fn, delay)

fn是函數(shù)也可以是字符串,delay是延遲的時(shí)間,單位是毫秒

有以下要注意的

1.fn雖然可以是字符串,但是一直都不推薦這么使用

2.fn里面的函數(shù)如果有this，執(zhí)行的時(shí)候this會(huì)指向到window上面去

如果理解好了js單線程和Event loop,定時(shí)器的原理也很好理解了

如果設(shè)置了定時(shí)器,當(dāng)?shù)搅搜舆t時(shí)間,瀏覽器會(huì)把延遲執(zhí)行的事件放到Event loop里面,當(dāng)時(shí)間到了,如果js線程空閑就會(huì)執(zhí)行了(所以定時(shí)器的精度不準(zhǔn)啊)

看有文章介紹說setTimeout和setInterval對(duì)函數(shù)一直輪詢的區(qū)別,代碼如下

復(fù)制代碼代碼如下:

        setTimeout(function(){

            setTimeout(arguments.callee,100)    

        },100)

        setInterval(function(){},1000)

文章大概的意思是setTimeout是在回調(diào)函數(shù)執(zhí)行后才啟動(dòng)下一次定時(shí)器,所以肯定是有間隔的執(zhí)行,而setInterval是一直都在執(zhí)行,如果碰到了js線程一直執(zhí)行,可能就會(huì)在Event loop里面加多個(gè)回調(diào),當(dāng)js線程不忙的時(shí)候,會(huì)一下子執(zhí)行多個(gè)

經(jīng)過測試發(fā)現(xiàn)無論在ie,ff,chrome,Opera,Safari下,setInterval都是按一定間隔來的

測試代碼如下

復(fù)制代碼代碼如下:

        setInterval(function(){
            xx.innerHTML=xx.innerHTML+1;
        },100);

        for(var i=0;i<6000000;i++){
            xx.offsetWidth
        }

        setTimeout(function(){
            debugger;
        },10)

斷點(diǎn)的時(shí)候還是只打印出了1個(gè)1

定時(shí)器的精度問題

因?yàn)閖s單線程原因,如果遇到繁忙,定時(shí)器肯定不準(zhǔn),而且肯定是越來越長的,這個(gè)好像無解啊,無解啊

還有一個(gè)精度問題就是最小間隔setTimeout(fun,0)

在js線程不忙的時(shí)候,也不可能0秒后馬上執(zhí)行,總有個(gè)最小間隔,每個(gè)瀏覽器還各不一樣,這個(gè)未做測試

我看一篇文章中說的是w3c的標(biāo)準(zhǔn),定時(shí)器的最小時(shí)間執(zhí)行是4ms,找不到出處無從考證呀！?。?/p>

定時(shí)器相關(guān)的一些優(yōu)化

在做定時(shí)器的時(shí)候還是可以有一些優(yōu)化的

1.比如如果綁定window.onresize,在瀏覽器縮放的時(shí)候,該觸發(fā)的非常頻繁,所以可以延遲執(zhí)行,當(dāng)下次執(zhí)行到的時(shí)候clear掉,減少頻繁執(zhí)行

偽代碼如下

復(fù)制代碼代碼如下:

    var timer;

    function r(){

        clearTimeout(timer);

        timer = setTimeout(function(){

            //do something

        },150);        

    }

2.在滾動(dòng)條往下拉的時(shí)候也是一下,比如圖片的lazyload,也應(yīng)該有一個(gè)定時(shí)器,避免過多的計(jì)算

3.當(dāng)有多個(gè)地方需要定時(shí)器的時(shí)候,可以合并成一個(gè)定時(shí)器,時(shí)間間隔以最小的那個(gè)為準(zhǔn),然后需要執(zhí)行的回調(diào)函數(shù)往數(shù)組里面塞,當(dāng)?shù)搅藭r(shí)間間隔,遍歷數(shù)組執(zhí)行即可

一個(gè)小demo

復(fù)制代碼代碼如下:

        runTime.add(function(){
            a1.innerHTML = ~~a1.innerHTML+1;
        });

        runTime.add(function(){
            a2.innerHTML = ~~a2.innerHTML+1;
        },{step:2000});

        runTime.add(function(){
            a3.innerHTML = ~~a3.innerHTML+1;
        },{step:4000});
                runTime.add(function(){
            a4.innerHTML = ~~a4.innerHTML+1;
        },{step:8000});
    </script>
</body>
</html>

小伙伴們是否對(duì)javascript定時(shí)器有所了解了呢，如有疑問給我留言吧。