在日常開發中有很多場景我們都需要用到節流函式和防抖函式，比如：實現輸入框的模糊查詢因為需要輪詢ajax，影響瀏覽器效能，所以需要用到節流函式；實現手機號、姓名之類的的驗證，往往我們只需要驗證一次，這個時候我們就需要用到防抖函式；但是網上的很多資料都是不夠具體和便於理解。今天自己翻閱了一些資料之後，來簡單的談談我對節流函式和防抖函式的理解，希望能幫助大家理解；

　　節流函式

　　　　顧名思義，就是節省流量節省記憶體效能的一種函式，可以理解為是一種效能優化方案；

　　　　舉個例子：一個水龍頭一直在滴水，可能一次性會滴很多水，但是我們想控制它的頻率 ，讓它每1000毫秒滴一滴水，這個時候我們就可以用到節流函式來進行控制（簡單可以理解為類似於週期性定時器）

　　　　js程式碼（可直接複製到編輯器上看效果）：

//首先定義一個全域性變數
var canRun = true;
//當瀏覽器視窗大小發生變化也就是重新計算視窗大小的時候觸發
window.onresize = function(){
//  取反，canRun為false的情況下
if(!canRun){
//直接return，後面的程式碼不執行
  return
}
//走到這來就是canRun為true的情況，然後進行賦值為false
canRun = false

//設定一個定時器進行輪詢操作
setTimeout( function () {
//這是要做的事情
    console.log("函式節流")
//最後記得重新賦值true繼續讓他取反
    canRun = true
//每隔1000毫秒也就是1秒鐘就執行一次

  }, 1000)
}

　　效果圖如下：

　　防抖函式

　　　　防抖函式和節流函式很類似，但是稍有區別，防抖函式的定義是當事件觸發完成之後再延遲觸發，並且只觸發一次；如果在觸發完成之前再次觸發，則會再次重新整理延遲；簡單理解為（如果事件不觸發即不執行，並且只會執行一次，就是定時器最後走的那一次）

　　　　js程式碼（可直接複製到編輯器上看效果）：

//定義方法即要做的事情
function fun(){
  console.log('onresize')
  
}
//定義事件觸發要執行的方法，兩個引數分別是傳入的要做的事情和定時器的毫秒數
function debounce(fn,delay){
　　//定義一個變數作為等會清除物件
        var handle;
　　//這裡用到了閉包，一個函式裡面return另一個函式，變數相互籤引導致垃圾回收機制不會銷燬handle變數
        return function(){
　　　　　　//在這裡一定要清除前面的定時器，然後建立一個新的定時器
            clearTimeout(handle) 
　　　　　　//最後這個定時器只會執行一次也就是事件觸發完成之後延遲500毫秒再觸發（這裡的變數賦值是跟定時器建立連線，進行地址賦值，一定要重新賦值給handle）   
         handle=setTimeout(function(){
             fn()
         },delay)
        }
        
      }
//給瀏覽器新增監聽事件resize
window.addEventListener('resize', debounce(fun, 500));

 效果圖如下：

 　　總結：

　　　　1.防抖函式和節流函式都是用來提升效能優化及使用者體驗的一種方案；

　　　　2.防抖函式只會執行一次，且是最後觸發的那一次，而節流函式會規律性的執行多次；