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

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

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

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

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

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

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

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

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

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

控制執(zhí)行

點(diǎn)擊事件是會(huì)產(chǎn)生冒泡，執(zhí)行的順序是當(dāng)前點(diǎn)擊元素->父元素->...->document，一直往上執(zhí)行到document。如果對(duì)當(dāng)前元素的點(diǎn)擊事件處理加上setTimeout的話，那么執(zhí)行順序就會(huì)改變?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)建一個(gè)輪詢(xún)?nèi)蝿?wù)

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

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

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

分塊處理耗時(shí)計(jì)算

瀏覽器給javascript的運(yùn)行規(guī)定了內(nèi)存和時(shí)間，假如javascript運(yùn)行的時(shí)間超過(guò)了規(guī)定時(shí)間，那么瀏覽器就會(huì)""報(bào)錯(cuò)""

    for(var i = 0; i < arr.length; i++){
        //耗時(shí)很久的嵌套循環(huán)或者運(yù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í)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎執(zhí)行完畢時(shí)立即被執(zhí)行。這樣的結(jié)果會(huì)導(dǎo)致新內(nèi)容很晚才能渲染完成，很多時(shí)候我們需要讓界面先渲染完成之后在去調(diào)用JS引擎來(lái)執(zhí)行，那么可以使用setTimeout來(lái)延遲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);