防抖:
防抖的基本原理是,在指定的时间间隔内,如果连续触发了多次事件,则只执行最后一次事件。
常用于一些需要等待用户停止操作后再执行的场景,比如搜索输入框的自动完成功能。
function debounce(func, delay) {
let timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(func, delay);
}
}
// 使用示例
const handleSearch = () => {
// 执行搜索操作
}
const debounceSearch = debounce(handleSearch, 300);
input.addEventListener('input', debounceSearch);
上述代码中,debounce函数接受一个回调函数和延迟时间(单位:毫秒)。在事件触发时,该函数会清除之前的定时器,并创建一个新的定时器,延迟执行回调函数。
节流:
节流的基本原理是,在指定的时间间隔内,连续触发的事件只执行一次。
常用于一些需要限制事件触发频率的场景,比如实时刷新数据、滚动事件等。
function throttle(func, delay) {
let lastExecTime = 0;
return function() {
const currentTime = Date.now();
if (currentTime - lastExecTime > delay) {
func();
lastExecTime = currentTime;
}
}
}
// 使用示例
const handleScroll = () => {
// 处理滚动事件
}
const throttleScroll = throttle(handleScroll, 300);
window.addEventListener('scroll', throttleScroll);
上述代码中,throttle函数接受一个回调函数和时间间隔(单位:毫秒)。在事件触发时,该函数会判断当前时间与上次执行的时间间隔,如果超过了设定的时间间隔,则执行回调函数,并更新执行时间。
区别:防抖只会在最后一次事件后执行触发函数,节流不管事件多么的频繁,都会保证在规定时间段内触发事件函数。