防抖和节流本质上是一种优化高频率执行代码的一种方法。
1,防抖
当频繁触发某个事件时,防抖可以确保事件处理函数只执行一次,且在事件触发后的某个时间间隔内不再触发。常用于如输入框实时搜索、窗口大小调整等场景,以减少不必要的计算或请求。
<script>
//创建一个防抖函数
function debounce(func, wait) {
let timeout;
return function debounced() {
const context = this;
const args = arguments;
clearTimeout(timeout);
//timeout = setTimeout(() => func.apply(context, args), wait);
timeout=setTimeout(function(){
func.apply(context,args)
},wait)
};
}
// 使用
function doSomething() {
console.log('防抖.....');
}
// 创建一个防抖后的函数,延迟2秒执行
const debouncedDoSomething = debounce(doSomething, 2000);
// 模拟频繁触发事件
window.addEventListener('resize', debouncedDoSomething);
// 当窗口大小调整时,doSomething函数将在最后一次调整后的500毫秒内执行一次
</script>
分析: debounce
函数接受两个参数:func
是需要防抖的函数,wait
是等待的时间(以秒为单位)。debounce
函数返回一个新的函数,这个新函数在被频繁调用时会取消之前的定时器并重新设置,从而确保 func
函数只会在最后一次调用后的 wait
后执行。
doSomething
函数被防抖处理,并绑定到窗口的 resize
事件上。这样无论窗口大小如何频繁地调整,doSomething
函数只会在最后一次调整后的2秒内执行一次。
2,节流
当频繁触发某个事件时,节流可以确保事件处理函数在一定的时间间隔内只执行一次。这意味着事件处理函数的执行频率是受限的。常用于如滚动事件、窗口resize等场景,以优化性能。
<script>
//创建节流函数
function throttle(func, limit) {
let inThrottle;
return function throttled() {
const context = this;
const args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 使用
function updatePosition() {
console.log('节流...');
}
// 创建一个节流后的函数,每2秒最多执行一次
const throttledUpdatePosition = throttle(updatePosition, 2000);
// 模拟频繁触发事件,如鼠标移动
window.addEventListener('mousemove', throttledUpdatePosition);
// 当鼠标移动时,updatePosition函数每2秒最多执行一次
</script>
throttle
函数接受两个参数:func
是需要节流的函数,limit
是两次函数调用之间的最小时间间隔(以秒为单位)。throttle
函数返回一个新的函数,这个新函数在被频繁调用时,会检查是否已经过了指定的时间间隔。如果过了时间间隔,则执行函数并重置时间间隔;如果没过时间间隔,则忽略这次调用。
updatePosition
函数被节流处理,并绑定到窗口的 mousemove
事件上。这样无论鼠标如何频繁地移动,updatePosition
函数每2秒最多只会执行一次。这有助于减少不必要的计算或DOM操作,提高性能。