防抖和節(jié)流
-
節(jié)流函數(shù)在一段時間內(nèi)的多次調(diào)用，只有第一次的調(diào)用生效哄陶。 -
防抖函數(shù)在一段時間內(nèi)的多次調(diào)用忧吟，僅使得最后一次調(diào)用有效苗膝。
節(jié)流和防抖都是用來控制某些函數(shù)的調(diào)用頻率。
例如绞蹦，在窗口resize的時候恬总，由于可視區(qū)變大驼修，我們可能需要向服務(wù)器請求更多內(nèi)容來填充可視區(qū)卸耘。但可視區(qū)變大的過程中退敦，resize事件會被觸發(fā)多次...每次觸發(fā)都去請求一次的話沒有必要...這時就需要節(jié)流防抖來做控制
function resize(e) {
console.log("窗口大小改變了");
}
window.addEventListener('resize', resize);
resize.gif
手寫節(jié)流功能
- 使用時間戳
function throttle(func, delay) {
var last = 0;
return function () {
var now = Date.now();
if (now >= delay + last) {
func.apply(this, arguments);
last = now;
} else {
console.log("距離上次調(diào)用的時間差不滿足要求哦");
}
}
}
function resize(e) {
console.log("窗口大小改變了");
}
window.addEventListener('resize', throttle(resize, 500));
節(jié)流執(zhí)行.gif
- 使用定時器
function throttle(func, delay) {
var timer = null;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
} else {
console.log("上一個定時器尚未完成");
}
}
}
function resize(e) {
console.log("窗口大小改變了");
}
window.addEventListener('resize', throttle(resize, 500));
以上可以看出，節(jié)流的意思就是函數(shù)在一段時間內(nèi)的多次調(diào)用蚣抗，僅第一次有效侈百，只執(zhí)行這段時間內(nèi)的第一次的操作
節(jié)流.gif
防抖
function debounce(func, delay) {
var timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(()=>{
func.apply(this, arguments);
}, delay);
}
}
function resize(e) {
console.log("窗口大小改變了");
}
window.addEventListener('resize', debounce(resize, 500));
防抖執(zhí)行.png
由以上可以看出執(zhí)行resize函數(shù)與最后一次調(diào)用之間相差500ms。
防抖就是在該段時間內(nèi)多次調(diào)用函數(shù)翰铡，會重寫改函數(shù)執(zhí)行的延時器钝域，一直多次調(diào)用則實際的resize函數(shù)一直不執(zhí)行，直到該函數(shù)觸發(fā)執(zhí)行后500ms內(nèi)沒有再次觸發(fā)后才會執(zhí)行锭魔。
所以防抖就像是PK賽里的待定區(qū)例证，下一個待定的人會把上一個待定的人踢出局
debounce.gif
