淺談JavaScript的防抖與節流

時間 2020-02-27

原文原文鏈接

前言

在前端開發的過程當中，咱們常常會須要綁定一些持續觸發的事件，如 resize、scroll、mousemove 等等，但有些時候咱們並不但願在事件持續觸發的過程當中那麼頻繁地去執行函數。這時候就用到防抖與節流。前端

相關推薦vue

本人github: github.com/Michael-lzg
個人掘金：https://juejin.im/user/5b52fd...webpack

函數防抖（debounce）：

當持續觸發事件時，必定時間段內沒有再觸發事件，事件處理函數纔會執行一次，若是設定的時間到來以前，又一次觸發了事件，就從新開始延時。以下圖，持續觸發scroll事件時，並不執行handle函數，當1000毫秒內沒有觸發scroll事件時，纔會延時觸發scroll事件。git

非當即執行版github

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);      
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

非當即執行版的意思是觸發事件後函數不會當即執行，而是在 n 秒後執行，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。web

當即執行版vue-cli

function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}

當即執行版的意思是觸發事件後函數會當即執行，而後 n 秒內不觸發事件才能繼續執行函數的效果npm

防抖應用場景

搜索框輸入查詢，若是用戶一直在輸入中，沒有必要不停地調用去請求服務端接口，等用戶中止輸入的時候，再調用，設置一個合適的時間間隔，有效減輕服務端壓力。
表單驗證
按鈕提交事件。
瀏覽器窗口縮放，resize事件(如窗口中止改變大小以後從新計算佈局)等。

函數節流（throttle）：

當持續觸發事件時，保證必定時間段內只調用一次事件處理函數。節流通俗解釋就好比咱們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉着勤儉節約的優良傳統美德，咱們要把水龍頭關小點，最好是如咱們心意按照必定規律在某個時間間隔內一滴一滴的往下滴。以下圖，持續觸發scroll事件時，並不當即執行handle函數，每隔1000毫秒纔會執行一次handle函數。函數節流主要有兩種實現方法：時間戳和定時器後端

時間戳版:瀏覽器

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

定時器版:

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

節流應用場景

按鈕點擊事件
拖拽事件
onScoll
計算鼠標移動的距離(mousemove)

總結

函數防抖：將幾回操做合併爲一此操做進行。原理是維護一個計時器，規定在delay時間後觸發函數，可是在delay時間內再次觸發的話，就會取消以前的計時器而從新設置。這樣一來，只有最後一次操做能被觸發。
函數節流：使得必定時間內只觸發一次函數。原理是經過判斷是否到達必定時間來觸發函數。

區別：

函數節流無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。好比在頁面的無限加載場景下，咱們須要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操做時纔去請求數據。這樣的場景，就適合用節流技術來實現。

淺談JavaScript的防抖與節流

前言

函數防抖（debounce）：

防抖應用場景

函數節流（throttle）：

節流應用場景

總結

區別：

推薦文章