防抖函数的作用是,在事件触发后等待一定时间(delay),如果在这段时间内没有再次触发事件,才执行回调函数。如果在这段时间内又触发了事件,则重新计时。
防抖函数的实现:
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
使用示例:
function handleInput() {
console.log('Input event debounced');
}
const debouncedHandleInput = debounce(handleInput, 300);
input.addEventListener('input', debouncedHandleInput);
一般使用在输入框搜索,按钮点击,防止重复提交,实时搜索
节流函数的实现:
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const currentTime = Date.now();
if (currentTime - lastTime >= delay) {
func.apply(this, args);
lastTime = currentTime;
}
};
}
节流函数的作用是,在一定时间间隔(delay)内只执行一次回调函数。如果在这段时间内多次触发事件,只有第一次触发会执行回调函数,后续触发会被忽略。
使用示例:
function handleScroll() {
console.log('Scroll event throttled');
}
const throttledHandleScroll = throttle(handleScroll, 300);
window.addEventListener('scroll', throttledHandleScroll);
一般使用在页面滚动,窗口调整,鼠标移动,频繁操作限制