他們都是可以防止一個函數(shù)被無意義的高頻率調(diào)用

防抖函數(shù):是函數(shù)在特定的時間內(nèi)不被再調(diào)用后執(zhí)行
節(jié)流函數(shù):是確保函數(shù)特定的時間內(nèi)至多執(zhí)行一次。

<input v-model="searchText" @input='search' placeholder="防抖" class="search-placeholder">
<input v-model="searchText" @input="searchInputChage" placeholder="節(jié)流" class="search-placeholder">

1.防抖函數(shù)

• 定義：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時；典型的案例就是輸入搜索：輸入結(jié)束后n秒才進行搜索請求，n秒內(nèi)又輸入的內(nèi)容，就重新計時。

• 實現(xiàn)原理：函數(shù)防抖的基本思想是設(shè)置一個定時器，在指定時間間隔內(nèi)運行代碼時清楚上一次的定時器，并設(shè)置另一個定時器，知道函數(shù)請求停止并超過時間間隔才會執(zhí)行。

• 使用場景：文本框輸入搜索（連續(xù)輸入時避免多次請求接口）

export default {
    debounce(fn, delay = 500) {   //默認(rèn)500毫秒
        var timer = null
        return function() {
            var args = arguments;
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args);   // this 指向vue
            }, delay);
        };
    }
}

import debounce from '@/utils/common.js'; //注意引用路徑

search:debounce(() => {//防抖使用
  //請求接口
},300)

2.節(jié)流函數(shù)

• 定義：規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)，如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效； 典型的案例就是鼠標(biāo)不斷點擊觸發(fā)，規(guī)定在n秒內(nèi)多次點擊只有一次生效。

• 實現(xiàn)原理：其原理是用時間戳來判斷是否已到回調(diào)該執(zhí)行時間，記錄上次執(zhí)行的時間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時間戳距離上次執(zhí)行時間戳的間隔是否已經(jīng)到達(dá) 規(guī)定時間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時間戳，

• 使用場景：resize、scroll、mousemove等事件觸發(fā)監(jiān)聽

export default {
  throttle(fn,delay = 500,duration = 1000){
    var that = this;
    var timer = this.timer;
    var begin = new Date().getTime();
    return function(){
      var context = that;
      var args = arguments;
      var current = new Date().getTime();
      clearTimeout(timer);
      if(current-begin>=duration){
        fn.apply(context,args);
        begin=current;
      }else{
        console.log(delay)
        that.timer=setTimeout(function(){
        fn.apply(context,args);
        },delay);
      }
    }
  }
}

import throttle from '@/utils/common.js'; //注意引用路徑

searchInputChage() {//節(jié)流使用
  throttle (this.getSearch, 200,1000)();
},
getSearch(){
  //請求接口
}