首頁 > web前端 > js教程 > 主體

深入探索javascript計時器_javascript技巧

WBOY
發布: 2016-05-16 16:22:40
原創
1298 人瀏覽過

javascript單線程

JavaScript的單線程,與它的用途有關。作為瀏覽器腳本語言,JavaScript的主要用途是與使用者互動,以及操作DOM。這決定了它只能是單線程,否則會帶來複雜的同步問題。例如,假定JavaScript同時有兩個線程,一個線程在某個DOM節點上加入內容,另一個線程就刪除了這個節點,這時瀏覽器應該以哪個執行緒為準?所以,為了避免複雜性,從一誕生,JavaScript就是單線程,這已經成了這門語言的核心特徵,未來也不會改變。

隊列任務

單執行緒就意味著,所有任務都需要排隊,前一個任務結束,才會執行後一個任務。如果前一個任務耗時很長,後一個任務就得一直等著。


非同步事件驅動

瀏覽器中許多行為是非同步(Asynchronized)的,例如:滑鼠點擊事件、視窗大小拖曳事件、計時器觸發事件、XMLHttpRequest完成回調等。當一個非同步事件發生的時候,它就會進入事件佇列。瀏覽器有一個內部大消息循環,Event Loop(事件循環),會輪詢大的事件佇列並處理事件。例如,瀏覽器目前正忙於處理onclick事件,這時另外一個事件發生了(如:window onSize),這個非同步事件就被放入事件佇列等待處理,只有前面的處理完畢了,空閒了才會執行這個事件。

Event Loop

JavaScript是單執行緒的,但瀏覽器不是單執行緒的

瀏覽器至少會有以下一些進程

1.瀏覽器 GUI 渲染線程

2.JavaScript 引擎執行緒

3.瀏覽器定時觸發器執行緒

4.瀏覽器事件觸發執行緒

5.瀏覽器 http 非同步請求執行緒

因為 JavaScript 引擎是單執行緒的,所以程式碼都是先壓到佇列,然後由引擎採用先進先出的方式運作。事件處理函數、timer 執行函數也會排到這個佇列中,然後利用一個無窮迴圈,不斷從隊頭取出函數執行,這就是Event Loop。

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

定時器原理

定時器的用法

setTimeout(fn, delay)

setInterval(fn, delay)

fn是函數也可以是字串,delay是延遲的時間,單位是毫秒

有以下要注意的

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

2.fn裡面的函數如果有this,執行的時候this會指向到window上面去


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

如果設定了定時器,當到了延遲時間,瀏覽器會把延遲執行的事件放到Event loop裡面,當時間到了,如果js線程空閒就會執行了(所以定時器的精度不準啊)


看有文章介紹說setTimeout和setInterval對函數一直輪詢的區別,程式碼如下

複製程式碼 程式碼如下:

        setTimeout(function(){
            setTimeout(arguments.callee,100)   
        },100)
        setInterval(function(){},1000)

文章大概的意思是setTimeout是在回調函數執行後才啟動下一次定時器,所以肯定是有間隔的執行,而setInterval是一直都在執行,如果碰到了js線程一直執行,可能就會在Event loop裡面加多個回呼,當js執行緒不忙的時候,會一下子執行多個

經過測試發現無論在ie,ff,chrome,Opera,Safari下,setInterval都是以一定間隔來的

測試程式碼如下

複製程式碼 程式碼如下:

        setInterval(function(){
            xx.innerHTML=xx.innerHTML 1;
        },100);
       
        for(var i=0;i             xx.offsetWidth
        }

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

斷點的時候還是只印出了1個1

定時器的精確度問題

因為js單線程原因,如果遇到繁忙,定時器肯定不準,而且肯定是越來越長的,這個好像無解啊,無解啊

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

在js執行緒不忙的時候,也不可能0秒後馬上執行,總有個最小間隔,每個瀏覽器還各不一樣,這個未做測試

我看一篇文章中說的是w3c的標準,定時器的最小時間執行是4ms,找不到出處無從考證呀! ! !

定時器相關的一些最佳化

在做定時器的時候還是可以有一些最佳化的

1.例如如果綁定window.onresize,在瀏覽器縮放的時候,該觸發的非常頻繁,所以可以延遲執行,當下次執行到的時候clear掉,減少頻繁執行

 偽代碼如下

複製程式碼 程式碼如下:

    var timer;
    function r(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            //do something
        },150);       
    }

2.在滾動條往下拉的時候也是一下,比如圖片的lazyload,也應該有一個定時器,避免過多的計算

3.當有多個地方需要定時器的時候,可以合併成一個定時器,時間間隔以最小的那個為準,然後需要執行的回調函數往數組裡面塞,當到了時間間隔,遍歷數組執行即可

 一個小demo

複製程式碼 程式碼如下:




   
   



   

       
0

       
0

       
0

       
0

   

>
   
        var runTime = {
            選項:{
                步驟:1000
            },
            回調:[],
            addCallbacks : [],
            開始:假,
            計時器:空,
            擴充:函數(){
                var 目標 = 參數[0] || {},i = 1,長度=arguments.length,選項;
                if ( typeof target != "object" && typeof target != "function" )
                    目標 = {};
                為 ( ; i                     if ( (options = argument[ i ]) != null )
                        for ( 選項中的 var 姓名 ) {
                            var copy = options[姓名 ];
                            if ( 目標 === 複製 )
                                續中;
                           if (複製!==未定義)
                               , 目標[姓名]=複製;
                        }
                回復目標;
            },
            初始化:函數(選項){
                $.extend(this,this.options,options||{});
            },
            新增:功能(樂趣,選項){
                選項 = 選項 ||{};
                this.addCallbacks.push({
                    有趣       : 有趣,
                    startTime : new Date().getTime(),
                    步驟     : options.step ||此一步,
                    我        : 1
                });
                var self = this;
                if(!this.start){
                    this.callbacks = [有趣];
                    this.start = true;
                    this.startTime = new Date().getTime();
                    this.timer = setInterval(function(){
                        self.done();   
                      
                    },此步驟);
                }
            },
            完成:函數(){
                varcallbacks = this.callbacks,
                    自我=這個,
                    newArr = [];
                $.each(回呼,函數(i,obj){
                    if(obj.step == self.step){
                        obj.fun();
                    }否則{                                          if(obj.i == obj.step/self.step){
                            if((new Date().getTime())-obj.startTime>obj.step*2/3){
                               obj.fun();
;
;                             }
                            obj.i = 1;
                        }其他{
                            obj.i = obj.i 1;
                        }
                    }
                });
                $.each(this.addCallbacks,function(i,obj){
                    if(obj.step == self.step){
                        if((new Date().getTime())-obj.startTime>obj.step*2/3){
                           obj.fun();
                            回復.push(obj);
                        }其他{
                            newArr.push(obj);
                        }
                    }其他{
                        obj.i = obj.i 1;
                        回復.push(obj);
                    }
                });
                this.addCallbacks = newArr;
            },
            清除:函數(){
                clearInterval(this.timer);
            }
        }
        runTime.init();

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

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

        runTime.add(function(){
            a3.innerHTML = ~~a3.innerHTML 1;
        },{步長:4000});
                runTime.add(function(){
            a4.innerHTML = ~~a4.innerHTML 1;
        },{步長:8000});
    腳本>
身體>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!