說說JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

yanwei 發(fā)布于2019-08-23 18:10 / 2716人閱讀

摘要：基礎防抖我們現(xiàn)在寫一個最基礎的防抖處理標記事件也做如下改寫現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時候，控制臺才會打印出一行隨機數(shù)。

為何要防抖和節(jié)流

有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數(shù)無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺接口的頻繁調用，不僅會影響客戶端體驗，還會大大增加服務器的負擔。而如果對這些調用函數(shù)增加一個限制，讓其減少調用頻率，豈不美哉？

針對這個問題，一般有兩個方案：
防抖 (Debounce)
節(jié)流 (Throttle)

防抖（Debounce）

我對函數(shù)防抖的定義：當函數(shù)被連續(xù)調用時，該函數(shù)并不執(zhí)行，只有當其全部停止調用超過一定時間后才執(zhí)行1次。

一個被經常提起的例子：

上電梯的時候，大家陸陸續(xù)續(xù)進來，電梯的門不會關上，只有當一段時間都沒有人上來，電梯才會關門。

Talk is cheap，我們直接 show code 吧。

先做基本的準備（篇幅原因，HTML部分省略）：

let container = document.getElementById("container");

// 事件處理函數(shù)
function handle(e) {
    onsole.log(Math.random()); 
}

// 添加滾動事件
container.addEventListener("scroll", handle);

我們發(fā)現(xiàn)，每滾動一下，控制臺就會打印出一行隨機數(shù)。

基礎防抖

我們現(xiàn)在寫一個最基礎的防抖處理：

function debounce(func, wait) {
    var timeout;//標記
    return function() {
      clearTimeout(timeout);
      timeout = setTimeout(func, wait);
    }
}

事件也做如下改寫：

container.addEventListener("scroll", debounce(handle, 1000));

現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動1秒鐘的時候，控制臺才會打印出一行隨機數(shù)。

標準防抖

以上基礎版本會有兩個問題，請看如下代碼：

// 處理函數(shù)
function handle(e) {
    console.log(this); //輸出Window對象
    console.log(e); //undefined
}

沒錯，當我們不使用防抖處理時，handle()函數(shù)的this指向調用此函數(shù)的container，而在外層使用防抖處理后，this的指向會變成Window。
其次，我們也要獲取到事件對象event。

所以我們要對防抖函數(shù)做以下改寫：

function debounce(fn, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(()=>{
      fn.apply(this,arguments)//使用apply改變this指向
    }, wait);
  }
}

當然了，如果使用箭頭函數(shù)便可以省去外層聲明。

先觸發(fā)式防抖

以上的情況都是只有當連續(xù)觸發(fā)停止后才執(zhí)行，那如果我們想讓事件第一次觸發(fā)就執(zhí)行，后面的連續(xù)觸發(fā)都不執(zhí)行，直到停止觸發(fā)一段時間才可以再次觸發(fā)（比如防止頻繁點擊），該如何處理呢？

那么可以利用同樣的原理，稍作修改即可：

function debounce(fn, wait) {
    let timeout;
    return function(){
      let arg = arguments;
      let that = this;
      clearTimeout(timeout);
      !timeout && fn.apply(that,arg)
        timeout = setTimeout(function(){
          timeout = null;
        }, wait);
    }
}

節(jié)流 (Throttle)

顧名思義，節(jié)流就是節(jié)約流量，將連續(xù)觸發(fā)的事件稀釋成預設評率。
比如每間隔1秒執(zhí)行一次函數(shù)，無論這期間觸發(fā)多少次事件。

這有點像公交車，無論在站點等車的人多不多，公交車只會按時來一班，不會來一個人就來一輛公交車。

標準節(jié)流

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

用滾動事件來描述節(jié)流，其實是一個非常典型的場景，比如需要用滾動事件判斷是否加載更多等。

先觸發(fā)式節(jié)流

和防抖函數(shù)類似，以上的情況是先等待后觸發(fā)，如果我們想讓事件先觸發(fā)后等待，該如何處理呢？網(wǎng)上大部分文章都告訴你用時間戳的方式去實現(xiàn)，其實只要像防抖一樣稍作修改即可實現(xiàn)。

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

這樣，我們就會發(fā)現(xiàn)第一次觸發(fā)函數(shù)就會立即生效。

總結

關于防抖與節(jié)流，lodash、underscore等工具庫都有完善的實現(xiàn)可以直接用，本沒有必要造輪子。本文的目的僅僅是為了將其主要思想和實現(xiàn)思路展現(xiàn)出來。更重要的，知道防抖和節(jié)流的本質后，就知道在何時使用防抖或者節(jié)流，何時先觸發(fā)或后觸發(fā)。無論需求如何改變，都可以靈活的運用。

云服務器 GPU云服務器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流 throttle

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

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

函數(shù)的防抖和節(jié)流是個啥？？？

摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個函數(shù)，將目標函數(shù)作為回調傳進去，等待一段時間過后執(zhí)行目標函數(shù)第二點實現(xiàn)了，再看第一點持續(xù)觸發(fā)不執(zhí)行。曾經面試時候被問到過這個，年少的我一臉無知。。。后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請求。簡直忍不了，就在項目的u...

edagarli 2019-08-23 18:35 評論0 收藏0
你們都會的防抖與節(jié)流

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

beanlam 2019-08-23 14:45 評論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結束后，處理回調，利用和實現(xiàn)。函數(shù)防抖關注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側重于一段時間內只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
前端筆記(二) 對象的深淺拷貝，函數(shù)的防抖與節(jié)流，函數(shù)柯里化，圖片的預加載與懶加載

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

dongxiawu 2019-08-26 11:43 評論0 收藏0
小菊花課堂之JS的防抖與節(jié)流

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

leoperfect 2019-08-23 13:53 評論0 收藏0