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

Yangder 發布于2019-08-02 12:10 / 1871人閱讀

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。

前言

陸游有一首《冬夜讀書示子聿》——“古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。”，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。

詳解

在前端開發中，我們經常會碰到一些會持續觸發的時間，比如輸入框校驗、resize、scroll、mousemove 等操作時，如果事件觸發的頻率無限制，會家中瀏覽器的負擔，導致用戶體驗非常糟糕。
我們可以先看看持續觸發過程中頻繁執行函數是怎樣的情況

在上面代碼中，div 元素綁定了 mousemove 事件，當鼠標在 div（灰色）區域中移動的時候會持續地去觸發該事件導致頻繁執行函數。

再看一個例子




    
    沒有防抖
    
    


    
        1.沒有防抖的input：

在上面代碼中，會監聽鍵盤輸入事件，只要按下鍵盤，就會觸發這次模擬的ajax請求，不僅浪費了資源，而且在實際應用中，用戶也是需要輸入完整字符后，才請求。

防抖(debounce)

簡單來說就是防止抖動，指觸發事件在 n 秒內函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。
我們將上面的代碼加入防抖優化一下：




    
    加入防抖
    
    


    
        2.加入防抖后的輸入：

上面代碼加入防抖后，當持續在輸入框里輸入時，并不會發送請求，只有當在指定時間間隔內沒有再輸入時，才會發送請求。如果先停止輸入，但是在指定間隔內又輸入，會重新觸發計時。

節流(throttle)

規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。
我們同樣在上面的需求上進行修改，加入節流函數。

//模擬ajax請求
function ajax(content) {
    console.log("ajax request " + content)
}

function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this;
        let _args = arguments;

        let now = +new Date();
        if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fun.apply(that, _args);
            }, delay)
        } else {
            last = now;
            fun.apply(that, _args);
        }
    }
}
let throttleAjax = throttle(ajax, 1000)
let inputThrottle = document.getElementById("throttle")
inputThrottle.addEventListener("keyup", function (e) {
    throttleAjax(e.target.value)
})

從上面代碼可以看出，規定每一秒執行一次ajax請求，效果圖也能比較清晰的反應出來。

小結區別

函數防抖是某一段時間內只執行一次；而函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

在其他同學的文章中看到這樣的解釋：
防抖 — 如果有人進電梯（觸發事件），那電梯將在10秒鐘后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

節流 — 我們知道目前的一種說法是當 1 秒內連續播放 24 張以上的圖片時，在人眼的視覺中就會形成一個連貫的動畫，所以在電影的播放（以前是，現在不知道）中基本是以每秒 24 張的速度播放的，為什么不 100 張或更多是因為 24 張就可以滿足人類視覺需求的時候，100 張就會顯得很浪費資源。

這大概可以較為清晰的講出這兩者的區別吧。

原理

防抖是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，都會清除當前的 timer 然后重新設置超時調用，即重新計時。這樣一來，只有最后一次操作能被觸發。

節流是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器。

文章來源
1.詳談js防抖和節流
2.輕松理解JS函數節流和函數防抖
3.函數防抖和節流

好啦，今天的小菊花課堂之JS的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。
see u ~ again

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

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

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

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

leoperfect 2019-08-23 13:53 評論0 收藏0
你們都會的防抖與節流

摘要：關于防抖與節流的應用和解釋自行查找資料。修改如果有定時器就清除如果時間滿足就讓他不滿足總之除了第一次就只讓其中一個執行一開始執行一次時間戳，最后停止在執行一次。這一篇文章我想寫一下防抖與節流，因為我自己不是很理解而且說實話，以前知道，但是老忘，雖然概念還有一些簡單的寫法會，但還是缺乏練習和深刻的理解。 showImg(https://segmentfault.com/img/remo...

beanlam 2019-08-23 14:45 評論0 收藏0
前端筆記(二) 對象的深淺拷貝，函數的防抖與節流，函數柯里化，圖片的預加載與懶加載

摘要：對象是無法通過這種方式深拷貝。這就是函數防抖和節流要做的事情。函數防抖當觸發頻率過高時函數基本停止執行而函數節流則是按照一定的頻率執行事件。對象的深淺拷貝對象的深拷貝與淺拷貝的區別：淺拷貝：僅僅復制對象的引用, 而不是對象本身。深拷貝：把復制的對象所引用的全部對象都復制一遍淺拷貝的實現： var obj = { age : 18, person : { ...

dongxiawu 2019-08-26 11:43 評論0 收藏0
高級函數技巧-函數防抖與節流

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

whinc 2019-08-22 11:21 評論0 收藏0
函數防抖與函數節流

摘要：函數節流保證如果電梯第一個人進來后，秒后準時運送一次，這個時間從第一個人上電梯開始計時，不等待，如果沒有人，則不運行。前言有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整窗口大小(onresize)、監聽滾動條滾動(onscroll)，如果這些監聽事件需要調用接口的話一秒內可能會調用上百次，這樣坑定是有問題的。函數防抖（debounce）如果有人進電梯（觸發事件），那電梯將在1...

novo 2019-08-26 12:02 評論0 收藏0