#關(guān)于setTimeout的妙用

崔曉明發(fā)布于2019-08-20 12:12 / 1030人閱讀

摘要：如果對當(dāng)前元素的點擊事件處理加上的話，那么執(zhí)行順序就會改變?yōu)楦冈禺?dāng)前元素。這樣的結(jié)果會導(dǎo)致新內(nèi)容很晚才能渲染完成，很多時候我們需要讓界面先渲染完成之后在去調(diào)用引擎來執(zhí)行，那么可以使用來延遲引擎的調(diào)用

關(guān)于setTimeout的妙用 定義

在指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一個代碼片段

這個是setTimeout最主要的功能，但也是很坑的地方，首先javascript其實是運行在單線程的環(huán)境下，意味者定時器會在未來的某個時間支持，但是具體的執(zhí)行的時間并不能夠很準(zhǔn)確的運行，容易受到其它時間的影響，比如DOM的計算、事件的執(zhí)行、各種函數(shù)的執(zhí)行和運算。但是我們可以利用延遲執(zhí)行的一些特性來達到我們想要的功能。

    window.setTimeout(callbask, delay, [param1, param2, ...])

函數(shù)節(jié)流

程序運行過程中對某個函數(shù)調(diào)用次數(shù)很多導(dǎo)致界面不斷回流或者重排，這時候就需要對這個函數(shù)進行節(jié)流，比如監(jiān)聽touchmove、scroll事件等，可以限定函數(shù)在單位時間內(nèi)只執(zhí)行一次

    var throttle = function(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            method.call(context);
        },100);
    }

控制執(zhí)行

點擊事件是會產(chǎn)生冒泡，執(zhí)行的順序是當(dāng)前點擊元素->父元素->...->document，一直往上執(zhí)行到document。如果對當(dāng)前元素的點擊事件處理加上setTimeout的話，那么執(zhí)行順序就會改變?yōu)楦冈?>...->document->當(dāng)前元素。這樣就可以控制冒泡事件的執(zhí)行順序

    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    document.body.addEventListener("click", function(e) {
        console.log("body");

    }, false);

    parent.addEventListener("click", function(e) {
        console.log("parent");
    }, false);
    
    child.addEventListener("click", function(e) {
        setTimeout(function() {
            console.log("child");
    
        }, 0);
    }, false);
    
    /*
    *parent
    *body
    *child
    */

構(gòu)建一個輪詢?nèi)蝿?wù)

javacsript中已經(jīng)有一個開啟輪詢的方法，就是setInterval，但是這種存在一個問題就是執(zhí)行間隔往往就不是你希望的間隔時間

比如有個輪詢?nèi)蝿?wù)間隔是100ms，但是執(zhí)行方法的時間需要450ms，那么在200ms、300ms、400ms本來是計劃中執(zhí)行任務(wù)的時間，瀏覽器發(fā)現(xiàn)第一個還未執(zhí)行完，那么就會放棄2、3、4次的任務(wù)執(zhí)行，并且在500ms之后再次執(zhí)行任務(wù)，這樣的話，其實再次執(zhí)行的間隔就只有50ms。使用setTimeout構(gòu)造輪詢能保證每次輪詢的間隔

    setTimeout(function(){
        alert(1);
        setTimeout(arguments.callee, 100);
    },100)

分塊處理耗時計算

瀏覽器給javascript的運行規(guī)定了內(nèi)存和時間，假如javascript運行的時間超過了規(guī)定時間，那么瀏覽器就會""報錯""

    for(var i = 0; i < arr.length; i++){
        //耗時很久的嵌套循環(huán)或者運算
        doSomeing(arr[i]);
    }

假如在循環(huán)中做的處理的邏輯不是同步的話，那么可以把邏輯""分片""執(zhí)行

    sertTimeout(function(){
        var item = arr.shift();
        dosomeing(item);
        if(arr.length <0 ){
            setTimeout(arguments.callee, 100);
        }
    }, 100);

延遲JS引擎的調(diào)用

GUI渲染線程和JS引擎的執(zhí)行之間是互斥，當(dāng)JS引擎執(zhí)行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎執(zhí)行完畢時立即被執(zhí)行。這樣的結(jié)果會導(dǎo)致新內(nèi)容很晚才能渲染完成，很多時候我們需要讓界面先渲染完成之后在去調(diào)用JS引擎來執(zhí)行，那么可以使用setTimeout來延遲JS引擎的調(diào)用

    var div = document.createElement("div");
    div.setAttribute("style", "background-color:#233; width:100px; height:100px");
    document.body.appendChild(div);
    
    setTimeout(function() {
        alert(1);
    }, 100);