函數防抖與函數節流

novo 發布于2019-08-26 12:02 / 913人閱讀

摘要：函數節流保證如果電梯第一個人進來后，秒后準時運送一次，這個時間從第一個人上電梯開始計時，不等待，如果沒有人，則不運行。

前言

有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整窗口大小(onresize)、監聽滾動條滾動(onscroll)，如果這些監聽事件需要調用接口的話一秒內可能會調用上百次，這樣坑定是有問題的。

函數防抖（debounce）

如果有人進電梯（觸發事件），那電梯將在10秒鐘后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function log(){
    console.log(1)
}

window.addEventListener("scroll", debounce(log, 1000));

函數節流（throttle）

保證如果電梯第一個人進來后，10秒后準時運送一次，這個時間從第一個人上電梯開始計時，不等待，如果沒有人，則不運行。
仔細想想，上面的防抖方式還是有一定的缺點。如果頁面很長，我們一直在滾動頁面，那log方法就一直不會被執行。所以我們可以升級一下上述的防抖方法。

function throttle(fn,wait,time){
    var previous = null; //記錄上一次運行的時間
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //當上一次執行的時間與當前的時間差大于設置的執行間隔時長的話，就主動執行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 執行函數后，馬上記錄當前時間
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function log(){
    console.log(1)
}

window.addEventListener("scroll", throttle(log, 1000, 2000));

云服務器 GPU云服務器 VUE防抖與節流函數節流 js函數節流函數中定義函數

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

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

小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0
JavaScript：函數防抖與函數節流

摘要：函數防抖簡單實現模擬請求獲取函數的作用域和變量清除定時器節流名詞解釋連續執行函數，每隔一定時間執行函數。效果函數防抖是某一段時間內只執行一次函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。防抖（debounce）名詞解釋：在事件被觸發n秒后再執行回調函數，如果在這n秒內又被觸發，則重新計時。使用場景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評論0 收藏0
高級函數技巧-函數防抖與節流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。函數節流比較直白的說，函數節流就是強制規定一...

whinc 2019-08-22 11:21 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
防抖與節流（源碼學習）

摘要：防抖與節流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源防抖函數防抖使用場景現在我們需要做一個搜索框，當用戶輸入文字，執行事件的時候，需要發出異步請求去進行結果查詢。防抖與節流（源碼學習）最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源：unders...

instein 2019-08-22 17:12 評論0 收藏0