摘要：隆重請(qǐng)出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過(guò)時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來(lái)實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場(chǎng)景函數(shù)防抖和節(jié)流

本篇課題，或許早已是爛大街的解讀文章。不過(guò)春招系列面試下來(lái)，不少伙伴們還是似懂非懂地栽倒在（～面試官～）深意的笑容之下，權(quán)當(dāng)溫故知新。

JavaScript的執(zhí)行過(guò)程，是基于棧來(lái)進(jìn)行的。復(fù)雜的程序代碼被封裝到函數(shù)中，程序執(zhí)行時(shí)，函數(shù)不斷被推入執(zhí)行棧中。所以 "執(zhí)行棧" 也稱 "函數(shù)執(zhí)行棧"。

函數(shù)中封裝的代碼塊，一般都有相對(duì)復(fù)雜的邏輯處理（計(jì)算/判斷），例如函數(shù)中可能會(huì)涉及到 DOM 的渲染更新，復(fù)雜的計(jì)算與驗(yàn)證， Ajax 數(shù)據(jù)請(qǐng)求等等。

前端頁(yè)面的操作權(quán)，大部分都是屬于瀏覽端的客戶爸爸們（單身三十年的手速，惹不起惹不起！！！）。如果函數(shù)被頻繁調(diào)用，造成的性能開銷絕對(duì)不只一點(diǎn)點(diǎn)。

前： DOM 頻繁重繪的卡頓讓客戶爸爸們想把你揪出來(lái)一頓大招。。。

后： 后端同學(xué)正在提刀趕來(lái)的路上：“為什么我的接口被你玩掛了”。。。

既要提升用戶體驗(yàn)，又要減少后端服務(wù)開銷，可見(jiàn)我們大前端的使命不只一頁(yè)P(yáng)PT。說(shuō)好前因，接著就是后果了。既然有優(yōu)化的需求，必然就要有相應(yīng)的解決方案。隆重請(qǐng)出主角： “防抖” 與 “節(jié)流”。

在事件被觸發(fā) n 秒后再執(zhí)行回調(diào)函數(shù)，如果在這 n 秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)延遲時(shí)間。

生活化理解：英雄的技能條，技能條讀完才能使用技能（R大招60s）

防抖的實(shí)現(xiàn)方式分兩種 “立即執(zhí)行” 和 “非立即執(zhí)行”，區(qū)別在于第一次觸發(fā)時(shí)，是否立即執(zhí)行回調(diào)函數(shù)。

”非立即執(zhí)行防抖“ 指事件觸發(fā)后，回調(diào)函數(shù)不會(huì)立即執(zhí)行，會(huì)在延遲時(shí)間 n 秒后執(zhí)行，如果 n 秒內(nèi)被調(diào)用多次，則重新計(jì)時(shí)延遲時(shí)間

// e.g. 防抖 - 非立即執(zhí)行
function debounce(func, delay) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    // && 短路運(yùn)算 == if(timeout) else {...} 
    timeout && clearTimeout(timeout); 
    timeout = setTimeout(function(){
      func.apply(context, args);
    }, delay);
  }
}

// 調(diào)用
var printUserName = debounce(function(){ 
  console.log(this.value);
}, 800);
document.getElementById("username")
  .addEventListener("keyup", printUserName);

“立即執(zhí)行防抖” 指事件觸發(fā)后，回調(diào)函數(shù)會(huì)立即執(zhí)行，之后要想觸發(fā)執(zhí)行回調(diào)函數(shù)，需等待 n 秒延遲

// e.g. 防抖 - 立即執(zhí)行
function debounce(func, delay) {
    var timeout;
    return function() {
        var context = this;
        var args = arguments;
        callNow = !timeout;
        timeout = setTimeout(function() {
            timeout = null;
        }, delay);
        callNow && func.apply(context, args);
    }
}

函數(shù)防抖原理：通過(guò)維護(hù)一個(gè)定時(shí)器，其延遲計(jì)時(shí)以最后一次觸發(fā)為計(jì)時(shí)起點(diǎn)，到達(dá)延遲時(shí)間后才會(huì)觸發(fā)函數(shù)執(zhí)行。

規(guī)定在一個(gè)單位時(shí)間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個(gè)單位時(shí)間內(nèi)觸發(fā)多次函數(shù)，只有一次生效（間隔執(zhí)行）

生活化理解：

FPS射擊游戲子彈射速（即使按住鼠標(biāo)左鍵，射出子彈的速度也是限定的）

水龍頭的滴水（水滴攢到一定重量才會(huì)下落）

函數(shù)節(jié)流實(shí)現(xiàn)的方式有 “時(shí)間戳” 和 “定時(shí)器” 兩種。

// e.g. 節(jié)流 - 時(shí)間戳
function throttle(func, delay) {
  var lastTime = 0;
  return function() {
    var context = this;
    var args = arguments;
    var nowTime = +new Date();
    if (nowTime > lastTime + delay) {
      func.apply(context, args)
      lastTime = nowTime;
    }
  }
}

“時(shí)間戳” 的方式，函數(shù)在時(shí)間段開始時(shí)執(zhí)行。

缺點(diǎn)：假定函數(shù)間隔1s執(zhí)行，如果最后一次停止觸發(fā)，卡在4.2s，則不會(huì)再執(zhí)行。

// e.g. 節(jié)流 - 定時(shí)器
function throttle(func, delay) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    if (!timeout) {
      setTimeout(function(){
        func.apply(context, args);
        timeout = null;
      }, delay)
    }
  }
}

“定時(shí)器” 的方式，函數(shù)在時(shí)間段結(jié)束時(shí)執(zhí)行。可理解為函數(shù)并不會(huì)立即執(zhí)行，而是等待延遲計(jì)時(shí)完成才執(zhí)行。（由于定時(shí)器延時(shí)，最后一次觸發(fā)后，可能會(huì)再執(zhí)行一次回調(diào)函數(shù)）

// e.g. 節(jié)流 - 時(shí)間戳 + 定時(shí)器
function throttle(func, delay) {
  let lastTime, timeout;
  return function() {
    let context = this;
    let args = arguments;
    let nowTime = +new Date();
    if (lastTime && nowTime < lastTime + delay) {
      timeout && clearTimeout(timeout);
      timeout = setTimeout(function(){
        lastTime = nowTime;
        func.apply(context, args);
      }, delay);
    } else {
      lastTime = nowTime;
      func.apply(context, args);
    }
  }
}

合并優(yōu)化的原理：“時(shí)間戳”方式讓函數(shù)在時(shí)間段開始時(shí)執(zhí)行（第一次觸發(fā)立即執(zhí)行），“定時(shí)器”方式讓函數(shù)在最后一次事件觸發(fā)后（如4.2s）也能觸發(fā)。

函數(shù)節(jié)流原理：一定時(shí)間內(nèi)只觸發(fā)一次，間隔執(zhí)行。通過(guò)判斷是否到達(dá)指定觸發(fā)時(shí)間，間隔時(shí)間固定。

相同：都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過(guò)時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來(lái)實(shí)現(xiàn)相關(guān)性能優(yōu)化。

區(qū)別：“防抖”是某一時(shí)間內(nèi)只執(zhí)行一次，最后一次觸發(fā)后過(guò)段時(shí)間執(zhí)行，而“節(jié)流”則是間隔時(shí)間執(zhí)行，間隔時(shí)間固定。

文本輸入搜索聯(lián)想

文本輸入驗(yàn)證（包括 Ajax 后端驗(yàn)證）

鼠標(biāo)點(diǎn)擊

監(jiān)聽滾動(dòng) scroll

窗口 resize

mousemove 拖拽

應(yīng)用場(chǎng)景還有很多，具體場(chǎng)景需具體分析。只要涉及高頻的函數(shù)調(diào)用，都可參考函數(shù)防抖節(jié)流的優(yōu)化方案。

鼓起勇氣寫在結(jié)尾：以上代碼都不是 “完美” 的 “防抖 / 節(jié)流” 實(shí)現(xiàn)代碼！！！僅就實(shí)現(xiàn)方式和基本原理，淺談分解一二。

實(shí)際代碼開發(fā)中，一般會(huì)引入lodash 相對(duì) “靠譜” 的第三方庫(kù)，幫我們?nèi)?shí)現(xiàn)防抖節(jié)流的工具函數(shù)。有興趣的伙伴們可閱讀 lodash 相關(guān)源碼，加深印象理解可再讀以下參考文章。

參考文章

7分鐘理解JS的節(jié)流、防抖及使用場(chǎng)景

函數(shù)防抖和節(jié)流