節流和防抖

在前端開發中，有時會為頁面繫結resize事件，或者為乙個頁面元素繫結拖拽事件（mousemove），這種事件有乙個特點，在乙個正常的操作中，有可能在乙個短的時間內觸發非常多次事件繫結程式。

dom操作時很消耗效能的，如果你為這些事件繫結一些操作dom節點的操作的話，那就會引發大量的計算，在使用者看來，頁面可能就一時間沒有響應，這個頁面一下子變卡了變慢了。在ie下，如果你繫結的resize事件進行較多dom操作可能直接就崩潰了。

這個你輕輕一拖，就會執行幾十次，這對效能不友好的。

輸入完成後統一傳送請求，最後乙個人說了算，只認最後一次

如果使用者每次輸入都傳送請求，冗餘過多，使用者停止輸入字元350毫秒後，在傳送請求

window.onscroll=function()

function debounce(fn, delay) , delay);};}

使用,會發現次數明顯的降低了

window.onscroll = debounce(function () , 100)

應用場景

某一段時間只執行一次,比如說350ms固定傳送請求

function throttle(fn, threshhold, scope) , threshhold);
} else 
};}$('body').on('mousemove', throttle(function (event) , 1000));

應用場景網上有這段話

什麼玩意兒？？？這麼麻煩的嗎？防抖還好，大部分都能達到理想的效果，可是節流就沒那麼理想了。節流是技能冷卻啊！就是要點一下立馬觸發，進入冷卻，等冷卻，結束繼續能點。然而大多版本都是：點選等一會兒才觸發，進入冷卻。前面多了莫名的等待時間，不是立馬觸發的.......

關於js debounce 函式小結

函式節流外國的一篇文章

7分鐘理解js的節流、防抖及使用場景

最精簡的節流和防抖