溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了js防抖函數和節流函數使用場景和實現有什么區別，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
開發過程中，都遇到過某個事件被頻發觸發的場景，比如resize，scroll事件，input事件，而對應的事件處理函數也會被高頻率調用，這時會增加瀏覽器負擔，用戶體驗也不好，這也是防抖函數和節流函數存在的意義和使用場景。
函數防抖（debounce）：
持續觸發事件時，在設定時間段內沒有被觸發，才去調用事件處理函數，在設定時間段內如果事件又被觸發，則不調用事件處理函數，并從觸發事件時間重新開始延時。
具體實現：
設計思路：在setTimeout中調用事件處理函數，如果在定時器觸發函數執行之前又觸發函數，清除定時器。
function debounce(fn, timeout){
timeout = timeout || 1000;
let timer;
return () => {
if(timer){ clearTimeout(timer)}
timer = setTimeout(() => {
fn()
},timeout)
}
}
function printEvent(){
console.log('1121212')
}
window.addEventListener('scroll',debounce(printEvent,1000),false)節流函數（throttle） throttle ['θrɑt(ə)l] 油門；節氣門；扼殺
當事件被持續觸發時，在設定時間內只讓事件處理函數觸發一次。
定時器實現模式：定時器在延時時間執行過后，重置為null, 定時器為null時，重新設置定時器，如此循環
//節流函數
function throttle(fn, range){
range = range || 1000;
let timer;
return () => {
//console.log(111,typeof timer)
if(!timer){
timer = setTimeout( () => {
fn()
timer = null
},range)
}
}
}
window.addEventListener('mousemove',throttle(printEvent,1000),false)時間戳實現模式：初始化時獲取時間，每次觸發事件時再次獲取時間，兩次時間間隔等于或大于設定時間，執行事件，初始化時間重置為當前時間，如此循環。
//節流函數 時間戳模式
var throttle2 = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}也可以使用時間戳加定時器結合實現：
總結：
函數防抖：在無事件觸發后的設定時間執行事件，將幾次操作合并為一此操作進行。這樣一來，只有最后一次操作能被觸發。
函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。
區別： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。
比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。
以上就是關于js防抖函數和節流函數使用場景和實現有什么區別的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
