JavaScript防抖與節流詳解
阿新 • • 發佈:2021-10-20
目錄
- 防抖debounce
- 節流throttle
- 總結
防抖debounce
定義:對於短時間內連續觸發的事件,比如滾動事件,防抖就是讓某個時間期限內,事件處理函式只執行一次。
關於防抖,拿手指按壓彈簧舉例,用手指按壓彈簧,一直按住,彈簧將不會彈起直到鬆開手指。
舉例resize:
function debounce(fn,wait){
var timer = null;
return ()=>{
if(timer !== null){
clearTimeou客棧t(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));
上面是非立即執行版
立即執行版
function debounce(fn,wait){
let timeid,flag = true;
return () => {
clearTimeout(timeid);
if(flag){
fn();
flag = false;
}else{
timeid = setTimeout(()=>{
http://www.cppcns.com flag = true;
},wait);
}
}
}
拖動瀏覽器視窗,觸發resize,此時並不觸發handle函式,定時器計時,在計時時間內再次觸發resize的話,則會從新計時,這樣做的好處就是拖動瀏覽器視窗觸發resize,並不會頻繁執行handle函式,只讓其在需要執行的時候去執行,有效的去除了冗餘。
常見寫法:
const debounce = (func,delay = 200) => { let timeout = null return function () { clearTimeout(timeout) timeout = setTimeout(() => { func.apply(this,arguments) },delay) } }
節流throttle
定義:讓事件在一定時間內只執行一次。
本意是像水龍頭的水滴一樣,規定時間內只執行一次,減少頻繁反覆執行。
如搜尋框input事件。
通過時間戳計算:
function throttle(fn,wait){
let startTime = 0;
return function(){
let endTime = Date.now();
if(endTime-startTime>wait){
fn();
sta程式設計客棧rtTime = endTime;
}
}
}www.cppcns.com
通過定時器:
function throttle(fn,wait){ let timeid = null; return function(){ if(!timeid){ timeid = setTimeout(function(){ fn(); timeid = null; },wait) } } }
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!