欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入探尋javascript定時器

 更新時間：2015年01月02日 10:10:38   投稿：hebedich  
這篇文章主要介紹了深入探尋javascript定時器，十分的詳盡，十分全面,需要的朋友可以參考下

javascript單線程

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

隊列任務

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


異步事件驅動

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

Event Loop

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

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

1.瀏覽器 GUI 渲染線程

2.JavaScript 引擎線程

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

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

5.瀏覽器 http 異步請求線程

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

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

定時器原理

定時器的用法

setTimeout(fn, delay)

setInterval(fn, delay)

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

有以下要注意的

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

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


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

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


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

復制代碼 代碼如下:

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

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

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

測試代碼如下

復制代碼 代碼如下:

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

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

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

定時器的精度問題

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

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

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

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

定時器相關的一些優(yōu)化

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

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

 偽代碼如下

復制代碼 代碼如下:

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

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

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

 一個小demo

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    .wrap{width:80%; margin: 30px auto; border: 1px solid #ccc; padding: 20px;}
    .c{border: 1px solid #ccc; height: 30px;margin-bottom: 20px;}
    </style>
</head>
<body>
<div id="xx"></div>
    <div class="wrap" >
        <div id="a1" class="c">0</div>
        <div id="a2" class="c">0</div>
        <div id="a3" class="c">0</div>
        <div id="a4" class="c">0</div>
    </div>
<script src=">
    <script type="text/javascript">
        var runTime = {
            options  : {
                step : 1000
            },
            callbacks:[],
            addCallbacks : [],
            start : false,
            timer : null,
            extend : function(){
                var target = arguments[0] || {}, i = 1, length = arguments.length, options;
                if ( typeof target != "object" && typeof target != "function" )
                    target = {};
                for ( ; i < length; i++ )
                    if ( (options = arguments[ i ]) != null )
                        for ( var name in options ) {
                            var copy = options[ name ];
                            if ( target === copy )
                                continue;
                            if ( copy !== undefined )
                                target[ name ] = copy;
                        }
                return target;
            },
            init  : function(options){
                $.extend(this,this.options,options||{});
            },
            add : function(fun,options){
                options = options ||{};
                this.addCallbacks.push({
                    fun       : fun,
                    startTime : new Date().getTime(),
                    step      : options.step || this.step,
                    i         : 1
                });
                var self = this;
                if(!this.start){
                    this.callbacks = [fun];
                    this.start = true;
                    this.startTime = new Date().getTime();
                    this.timer = setInterval(function(){
                        self.done();   
                      
                    },this.step);
                }
            },
            done : function(){
                var callbacks = this.callbacks,
                    self   = this,
                    newArr = [];
                $.each(callbacks,function(i,obj){
                    if(obj.step == self.step){
                        obj.fun();
                    }else{                       
                        if(obj.i == obj.step/self.step){
                            if((new Date().getTime())-obj.startTime>obj.step*2/3){
                                obj.fun();
                            }
                            obj.i = 1;
                        }else{
                            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();
                            callbacks.push(obj);
                        }else{
                            newArr.push(obj);
                        }
                    }else{
                        obj.i = obj.i + 1;
                        callbacks.push(obj);
                    }
                });
                this.addCallbacks = newArr;
            },
            clear : function(){
                clearInterval(this.timer);
            }
        }
        runTime.init();

        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>

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

相關文章

最新評論