1、什麼是節流和去抖？
節流。就是擰緊水龍頭讓水少流一點，但是不是不讓水流了。想象一下在現實生活中有時候我們需要接一桶水，接水的同時不想一直站在那等著，可能要離開一會去幹一點別的事請，讓水差不多流滿一桶水的時候再回來，這個時候，不能把水龍頭開的太大，不然還沒回來水就已經滿了，浪費了好多水，這時候就需要節流，讓自己回來的時候水差不多滿了。那在js裡有沒有這種情況呢，典型的場景是懶載入監聽頁面的scoll事件，或者監聽滑鼠的mousemove事件，這些事件對應的處理方法相當於水，由於scroll和mousemove在滑鼠移動的時候會被瀏覽器頻繁的觸發，會導致對應的事件也會被頻繁的觸發（水流的太快了），這樣就會造成很大的瀏覽器資源開銷，而且好多中間的處理是不必要的，這樣就會造成瀏覽器卡頓的現象，這時候就需要節流，如何節流呢？我們無法做到讓瀏覽器不去觸發對應的事件，但是可以做到讓處理事件的方法執行頻率減少，從而減少對應的處理開銷。
去抖。最早接觸這個詞應該是在高中物理裡面學到的，有時候開關在在真正閉合之前可能會發生一些抖動現象，如果抖動的明顯的話，對應的小燈泡可能會閃爍，把燈泡閃壞了不重要，萬一把眼睛再給閃壞了可就麻煩了，這個時候就有去抖電路的出現。而在我們的頁面裡，也有這種情況，假設我們的乙個輸入框，輸入內容的同時可能會去後台查詢對應的聯想 詞，如果使用者輸入的同時，頻繁的觸發input事件，然後頻繁的向後抬傳送請，那麼直到使用者輸入完成時，之前的請求都應該是多餘的，假設網路慢一點，後台返回的資料比較慢，那麼顯示的聯想詞可能會出現頻繁的變換，直到最後的乙個請求返回。這個時候就可以在一定時間內監聽是否再次輸入，如果沒有再次輸入則認為本次輸入完成，傳送請求，否則就是判定使用者仍在輸入，不傳送請求。
去抖和節流是不同的，因為節流雖然中間的處理函式被限制了，但是只是減少了頻率，而去抖則把中間的處理函式全部過濾掉了，只執行規判定時間內的最後乙個事件。
2、js實現。
前面bb了這麼多，感謝你耐心的看到這裡，接下來我們來自己動手看看如何實現節流和去抖。
節流：
/** 實現思路：
** 引數需要乙個執行的頻率，和乙個對應的處理函式,
** 內部需要乙個lasttime 變數記錄上一次執行的時間
**/function throttle (func, wait)
}}
再看如何呼叫：
//由於閉包的存在，呼叫會不一樣
let throttlerun = throttle(() =>, 400)
window.addeventlistener('scroll', throttlerun)
這時候f瘋狂的滾動頁面，會發現會400ms列印乙個123，而沒有節流的話會不斷地列印， 你可以改變wait引數去感受下不同。
但是到這裡，我們的節流方法是不完善的，因為我們的方法沒有獲取事件發生時的this物件，而且由於我們的方法簡單粗暴的通過判斷這次觸發的時間和上次執行時間的間隔來決定是否執行**，這樣就會造成最後一次觸發無法執行，或者使用者出發的間隔確實很短，也無法執行，造成了誤殺，所以需要對方法進行完善。
function throttle (func, wait)arguments
) lasttime =now
} else
if (!timeout) , wait)}}
}
這樣我們的方法就相對完善了，呼叫方法和之前相同。
去抖：去抖的方法，和節流思路一致，但是只有在抖動被判定結束後，方法才會得到執行。
debounce (func, wait) , wait)} else
timeout = settimeout(() =>, wait)
}//注意這裡lasttime是上次的觸發時間
lasttime =now
}}
這時候按照之前同樣的方式呼叫，會發現無論怎麼瘋狂的滾動視窗，只有停止滾動時，才會執行對應的事件。
去抖和節流已經有很多成熟的js進行了實現，其大致思路基本是這樣的。
JS函式節流和函式防抖
防抖 debounce 和節流 throttle 都是用來控制某個函式在一定時間內執行多少次的技巧，兩者相似而又不同。背後的基本思想是某些 不可以在沒有間斷的情況下連續重複執行。如果乙個事件被頻繁觸發多次，並且觸發的時間間隔過短，則防抖函式可以使得對應的事件處理函式只執行最後觸發的一次。函式防抖可以...
js函式防抖和函式節流
函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。在頻繁觸發的情況下，只有在停止觸發的時候才會執行 函式節流 限制乙個函式在一定時間內只能執行一次。目的 函式防抖和函式節流都是用來優化高頻率執行js 的手段 簡而言之就是在一定時間內，把高...
JS 函式防抖和函式節流
所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。function debounce func,wait wait if callnow func.context,args 所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式。節流...