js 防抖節流 JavaScript

實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整dom的渲染；如keyup事件，監聽文字輸入並呼叫介面進行模糊匹配等等，這些事件處理函式呼叫的頻率如果太高，會加重瀏覽器的負擔，減弱效能，造成使用者體驗不好。此時需要採用debounce（防抖）和throttle（節流）的方式來減少呼叫頻率，同時不影響原來效果。

函式防抖（debounce）

當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。函式防抖的應用場景，最常見的就是使用者註冊時候的手機號碼驗證和郵箱驗證了。只有等使用者輸入完畢後，前端才需要檢查格式是否正確，如果不正確，再彈出提示語。

上圖中，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件；上面原理：對處理函式進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。 **如下：

// 函式防抖
var timer = false;
document.getelementbyid("debounce").onscroll = function(), 1000);
};複製**

防抖函式的封裝使用

/**
* 防抖函式
* @param method 事件觸發的操作
* @param delay 多少毫秒內連續觸發事件，不會執行
* @returns 
*/function
debounce(method,delay) ,delay);
}}window.onscroll = debounce(function () ,1000)
複製**

另一種寫法

// 防抖
function
debounce(fn, wait) 
}// 處理函式
function
handle() 
// 滾動事件
window.addeventlistener('scroll', debounce(handle, 1000));
複製**

函式節流（throttlo）

當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。函式節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。

上圖中，持續觸發scroll事件時，並不立即執行handle函式，每隔1000毫秒才會執行一次handle函式；函式節流的要點是，宣告乙個變數當標誌位，記錄當前**是否在執行。如果空閒，則可以正常觸發方法執行。 **如下：

// 函式節流 定時器
var canrun = true;
document.getelementbyid("throttle").onscroll = function()
canrun = false;
settimeout(function(), 300);
};複製**

節流函式的封裝使用

//節流throttle**（時間戳）
var throttle = function(func, delay)             
}        
}        
function
handle()         
window.addeventlistener('scroll', throttle(handle, 1000));
複製**

//節流throttle**（定時器）
var throttle = function(func, delay) , delay);                
}            
}        
}        
function
handle()         
window.addeventlistener('scroll', throttle(handle, 1000));
複製**

// 節流throttle**（時間戳+定時器）：
var throttle = function(func, delay)  else       
}}function
handle()  
window.addeventlistener('scroll', throttle(handle, 1000));
複製**

用時間戳+定時器，當第一次觸發事件時馬上執行事件處理函式，最後一次觸發事件後也還會執行一次事件處理函式

js 防抖節流 JavaScript

js節流防抖

js防抖節流

JS防抖節流

js 防抖 節流 JavaScript

js節流防抖

js防抖節流

JS防抖節流

相關推薦

js 防抖節流 JavaScript