#關于setTimeout的妙用

崔曉明發布于2019-08-20 12:12 / 1026人閱讀

摘要：如果對當前元素的點擊事件處理加上的話，那么執行順序就會改變為父元素當前元素。這樣的結果會導致新內容很晚才能渲染完成，很多時候我們需要讓界面先渲染完成之后在去調用引擎來執行，那么可以使用來延遲引擎的調用

關于setTimeout的妙用 定義

在指定的延遲時間之后調用一個函數或執行一個代碼片段

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

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

函數節流

程序運行過程中對某個函數調用次數很多導致界面不斷回流或者重排，這時候就需要對這個函數進行節流，比如監聽touchmove、scroll事件等，可以限定函數在單位時間內只執行一次

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

控制執行

點擊事件是會產生冒泡，執行的順序是當前點擊元素->父元素->...->document，一直往上執行到document。如果對當前元素的點擊事件處理加上setTimeout的話，那么執行順序就會改變為父元素->...->document->當前元素。這樣就可以控制冒泡事件的執行順序

    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
    */

構建一個輪詢任務

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

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

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

分塊處理耗時計算

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

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

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

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

延遲JS引擎的調用

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

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

GPU云服務器云服務器 setTimeout javascript settimeout js定時器setTimeout 關于樣式的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80854.html

解析setTimeout時間設置為0

摘要：要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在指定的時間執行。需要監聽文字改變，每一次改變都會調用一次回調函數，現在需要的一種實現是在用戶停止鍵盤事件一段時間后，去發送一個請求。 1、開胃菜，setTimeout為何物首先看一下w3school上面對于setTimeout的解釋 setTimeout(fn,millisec) 方法用于在指定的毫秒數后調用函...

zhigoo 2019-08-22 15:06 評論0 收藏0
::before和::after偽元素的妙用

摘要：下面是偽元素和偽元素的具體用法和使用規則作用在標簽前后添加字符串使用規則后面一定要用把要添加的內容括起來，否則是無法顯示的括號不一定需要添加。場景：假如有一天，你的在寫一個前端項目，是關于一份點餐商家電話信息表，你啪塔啪塔地寫完了，突然間項目經理跑過來找你，要求你在每一個商家的電話號碼前都添加一個電話符號，來使得電話號碼更直觀和頁面更美觀。這個時候你就糾結了，這不是折磨人嗎？這不是要我在...

番茄西紅柿 2019-04-23 13:29 評論0 收藏0
javascript-從toString方法在判斷復雜數據類型上的妙用，引申到對原型鏈的理解

摘要：所以，當我們使用時，不能進行復雜數據類型的判斷，因為它調用的是，雖然也繼承自，但在上重寫了，而我們通過實際上是通過原型鏈調用了。關于 toString 方法在有關js的開發中使用應該是相當廣泛的，這兩天在看jQuery的源碼，從 toString 本身了解與鞏固了不少知識，寫出來與大家一同分享。首先先上一段代碼： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 評論0 收藏0
js中this的四種使用場景

摘要：最近讀到了一篇介紹中的四種使用場景的文章，感覺總結的很好，所以我認真讀了讀，并且動手實踐了其中的，與大家共享。最近讀到了一篇介紹js中this的四種使用場景的文章，感覺總結的很好，所以我認真讀了讀，并且動手實踐了其中的demo，與大家共享。原文鏈接：https://github.com/alsotang/n...遇到this，一直要記得這句：函數執行時，this總是指向調用該函數的對...

lk20150415 2019-08-20 19:08 評論0 收藏0
React 應用設計之道 - curry 化妙用

摘要：右側展現對應產品。我們使用命名為的對象表示過濾條件信息，如下此數據需要在組件中進行維護。因為組件的子組件和都將依賴這項數據狀態。化應用再回到之前的場景，我們設計化函數，進一步可以簡化為對于的偏應用即上面提到的相信大家已經理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 評論0 收藏0