都0202年了，你必須懂的防抖和節流！！！

1、防抖與節流的區別

防抖與節流的區別就是：

假設你一直點擊一個按鈕：

**防抖：**一直刷新計算時間，一直不會執行，除非等你 2 次點擊的間隔時間大於等於防抖的間隔時間

節流：點擊後，觸發一次，等到間隔時間到達，你如果再點擊會再觸發，而在此期間是不會觸發的

你點擊頻率： * * * * * * * *                * * * * * * * * * * * * * *

防 抖 觸 發 ： ---------------------- ！--------------------------------------！

節 流 觸 發 ： ！------- ！---------------！------ ！------- ！ -----

拿一個代碼來做下面兩個的舉例例子：

這是沒有加防抖或節流的例子：鼠標在上面移動 數字增加

可以看到沒有加 防抖或節流 的話，數字移動的非常誇張

<div>0</div>

  div {
    width: 200px;
    height: 200px;
    background-color: pink;
    line-height: 200px;
    text-align: center;
    font-size: 60px;
    color: #ffffff;
  }

let div = document.getElementsByTagName('div')[0];
let num = 1;
// 累加函數
function count() {
  div.innerHTML = num++;
}
// 鼠標移動函數
div.onmousemove = count()

2、防抖

2.1、什麼是防抖？

指：觸發事件後 n 秒內只能執行一次，如果觸發後 n秒內又觸發了一次，就會重新計算時間

舉例

當你在輸入框輸入東西時，會有下拉框展現你輸入的 數據列表，

這個防抖就是：你輸入一個 籃 的 時候，會在1s後發送請求，但是你又輸入了 球 的時候，會重新計算時間，再次等待1s後才發送請求

2.2、防抖的代碼

function debounce(func, waitTime) {
  let timeout = null; // 定時器

   return function(...args) {
     //  如果有定時器的話，先清除之前的定時器，即重新計時
     if(timeout) clearTimeout(timeout);

    // 開始計時，時間到了再執行函數
    timeout = setTimeout(() => { 
      func.apply(this, args)
    }, waitTime);
  }
}

2.3、例子演示

使用上面的例子 ，添加入防抖的代碼，效果如何

let div = document.getElementsByTagName('div')[0];
let num = 1;
function count() {
  div.innerHTML = num++;
}
div.onmousemove = debounce(count, 1000)

// 防抖
// 讓鼠標停止移動後 過1s在顯示數據
function debounce(func, waitTime) {
  let timeout = null; // 定時器

  return function(...args) {
    //  如果有定時器的話，先清除之前的定時器，即重新計時
    if(timeout) clearTimeout(timeout);

    // 開始計時，時間到了再執行函數
    timeout = setTimeout(() => { 
      func.apply(this, args)
    }, waitTime);
  }
}

可以看到，只要鼠標還在不斷移動，數字就不會增加，當鼠標停下來 1s 後，纔會增加數字，應證了防抖的概念

3、節流

3.1、什麼是節流？

指：連續觸發事件但是在 n 秒中只執行一次函數

舉例

類似英雄聯盟的技能CD，在你執行了一個技能後，會進入CD，在這個期間，你無論怎麼點擊都是不會執行的，等CD結束，纔可以繼續執行

3.2、節流的代碼

// 節流
function throttle(func, waitTime) {
  let timeout = null;
  return function(...args) {
    // 如果沒有定時器，就添加一個定時器
    if(!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, waitTime)
    }
  }
}

3.3、例子演示

使用上面的例子 ，添加入節流的代碼，效果如何

let div = document.getElementsByTagName('div')[0];
let num = 1;
function count() {
  div.innerHTML = num++;
}
div.onmousemove = throttle(count, 1000);

// 節流
function throttle(func, waitTime) {
  let timeout = null;
  return function(...args) {
    // 如果沒有定時器，就添加一個定時器
    if(!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, waitTime)
    }
  }
}

可以看到，只要鼠標還在不斷移動，數字就會每秒一次的增加，當鼠標停下來 後，就不會繼續增加