在javascript中,防抖是指触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间;节流是指当持续触发事件时,保证一定时间段内只调用一次事件处理函数.
在JavaScript中,节流(throttling)和防抖(debouncing)是两种常用的性能优化技术,用于控制函数的执行频率。它们适用于不同的场景
一、防抖
(1)主要应用场景是在用户频繁触发某个事件时,例如窗口大小调整、搜索框输入等
(2) input输入框的案例:
let input = document.querySelector('input')
let time = null //用来控制事件的触发
input.on('click',function(){
if(time !== null){
clearInterval(time)
}
time = setTimeout(()=>{
//箭头函数没有this 这里的this指向input
console.log(this.value)
},500)
})
用time来控制事件的触发判断time是否为空,如果为空的话就打印this.value, 否则就清掉time,用500ms来控制事件的触发
下面这个使用闭包来封装一个防抖的函数
let input = document.querySelector('input')
input.on('click',debounce(function(){
console.log(this.value)
},500))
function debounce(fn,delay){
let time = null;
return function(){
if(time !==null){
clearTimeout(time)
}
time = setTimeout(()=>{
fn.call(this) //修改this指向 将this指向fn(也就是input)
},delay)
}
}
二、节流
(1)主要应用场景是在某个事件持续触发时,例如页面滚动、鼠标移动等.
(2)窗口滚动的案例:
window.addEventListener('scroll',throttle(function(){
console.log('处理滚动事件')
},200))
throttle(func,delay){
let timeoutId
return function(){
if(!timeoutId){
timeoutId = setTImeout(()=>{
func.apply(this,argumments);
timeoutId = null;
},delay);
}
}
}
throttle函数接受一个函数和一个延迟时间作为参数,它返回一个新的函数,该函数在指定的延迟时间内只能执行一次,但是在200毫秒内的连续滚动事件将被忽略.这样可以有效地减少函数地执行次数.
总结:防抖适用于用户频繁触发事件的场景,而节流适用于事件持续触发的场景.具体使用哪种技术取决于你的需求和场景.