debounce:防抖--------讓在用戶動作停止后延遲x ms再執(zhí)行回調(diào)
throttle:節(jié)流--------一定時間內(nèi)只觸發(fā)一次函數(shù)项贺;在時間間隔內(nèi)再次調(diào)用throttle函數(shù)载城,會清空原來的定時器,重置一個定時器络它。
防抖和節(jié)流和異同:
? ? 相同:都是將多次回調(diào)的觸發(fā)合并成一次執(zhí)行咖城。這就大大避免了過于頻繁的事件回調(diào)操作茬腿。事件觸發(fā)的頻率沒有改變,只是我們自定義的回調(diào)函數(shù)的執(zhí)行頻率變低了宜雀。
使用場景:
????防抖:用在keydown事件上驗證用戶名最好
? ? 節(jié)流:用在resize改變布局上切平,onscroll滾動時候的。
用法:
例1:防抖
function? debounce(fn,delay){
? ? var delay=delay||200;
????var timer;
????return? function(){
????????var? th=this;
????????var? args=arguments;
????????if(timer)?{
????????????clearTimeout(timer);
????????}
????????timer=setTimeout(function()?{
????????????????timer=null;
????????????????fn.apply(th,args);
????????},?delay);
????};
}
dom.addEventListener("mousemove",debounce(function(){
????//做一些dom操作或者其他的辐董。
????.....
}));
例2:節(jié)流
var btn = document.getElementById("btn");
? ? function throttle (method ,context) {
? ? ? ? clearTimeout(method.tID);
? ? ? ? method.tID = setTimeout (function () {
? ? ? ? ? ? method.call(context);
? ? ? ? }, 1000);
? ? }
? ? function say () {
? ? ? ? console.log("按鈕被點擊了");
? ? }
? ? btn.addEventListener('click',function() {
? ? ? ? throttle(say);
? ? });