防抖的作用
防抖是针对用户的高频操作的一种性能优化的策略,主要作用是减少程序执行次数(提升性能)、优化用户体验。常见的场景有:按钮click事件、窗口resize事件、scroll事件等。
防抖原理
给定一个时间周期,触发事件后开始计时,等待一个完整周期,周期内只执行一次事件处理函数。如果计时时间小于周期则重新计时,直到整个周期的时间完整过去。
防抖函数的实现(延迟版)
延迟版是在周期结束时执行,前面的时间不会执行:
function debounce(fn, t = 1000) {//fn 事件处理函数 t 时间周期
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(fn, t);
}
}
function testFn() {
console.log("延迟版")
}
window.addEventListener("scroll", debounce(testFn));
防抖函数的实现(前缘版)
前缘版是在周期开始时执行,后面的时间不会执行:
function debounce(fn, t = 1000) {//fn 事件处理函数 t 时间周期
let timer = null;
return function () {
if (timer) clearTimeout(timer);
if (!timer) fn();
timer = setTimeout(() => { timer = null }, t)
}
}
function testFn() {
console.log("前缘版")
}
window.addEventListener("scroll", debounce(testFn));
可配置版
/*
fn 执行函数
time 间隔周期
immediate 是否立即执行 true(前缘版) false(延迟版)
*/
function debounce(fn, time = 1000, immediate = false) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
if (immediate) {
if (!timer) fn();
timer = setTimeout(() => { timer = null }, time)
} else
timer = setTimeout(fn, time);
}
}
function logg() {
console.log("kkkkk")
}
window.addEventListener("scroll", debounce(logg, 1000, true))