什么是防抖和節流:??
比如搜索框，用戶在輸入的時候使用change事件去調用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務器資源，即使你的服務器資源很強大，也不帶這么玩的。
區別
函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。函數防抖將幾次操作合并為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。函數節流使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。
函數防抖
定義: 函數防抖就是在一段時間觸發或調用函數時,只執行一次; 也可以理解為觸發n毫秒之后才會調用一次
優點: 優化系統性能
例如每次用戶停止輸入后，延遲超過500ms時，才去搜索此時的String，這就是防抖。
如果用手指一直按住一個彈簧，它將不會彈起直到你松手為止。
也就是說當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。
原理：將若干個函數調用合成為一次，并在給定時間過去之后僅被調用一次。
應用場景：實時搜索（keyup）、拖拽（mousemove）
封裝防抖函數
完整demo
還有一種方法只不過獲取不到this 直接上代碼 不發截圖了
function?debounce(fn,wait){
????????var?timer?=?null;
????????return?function(){
????????????if(timer?!==?null){
????????????????clearTimeout(timer);
????????????}
????????????timer?=?setTimeout(fn,wait);
????????}
????}
????function?handle(){
????????console.log('你好');
????}
????input.oninput=debounce(handle,?1000)
函數節流
函數節流就是預定一個函數只有在大于等于執行周期時才執行，周期內調用不執行。好像水滴攢到一定重量才會落下。
指連續觸發事件但是在 n 秒中只執行一次函數。節流會稀釋函數的執行頻率。
應用場景：窗口調整(resize)、頁面滾動(scroll)、搶購瘋狂點擊(mousedowm)
時間戳版本
定時器版本
區別：
時間戳版的函數觸發是在時間段內開始的時候，而定時器版的函數觸發是在時間段內結束的時候。
