防抖与节流

防抖和节流都是优化高频触发事件的技术手段, 我们可以控制函数执行的效率,避免不必要的性能消耗

防抖: 防抖是一种延迟技术,当事件触发时，延迟事件处理函数，并且在延迟时间内如果被再次触发，则重新记时，只要在规则时间内没有被再次触发，事件函数才会被执行。

防抖适用于那些在用户停止操作后才需要执行的场景，比如
1、窗口的调整：用户频繁调整窗口时候，会触发resize事件,防抖可以确保在调整结束后执行相关操作
2、输入框联想：用户输入后，会触发keyup事件, 接口请求时在输入结束后
3、表单验证：用户在输入完成后，再进行表单验证

防抖代码：

function debounce(time,fn){let timer = null;return function(...args){const context = this;clearTimeout(timer)timer = setTimeout(()=>{fn().apply(context,args)},time)}
}

输入框防抖代码案例

const search = document.getElementById("search")
const handleSearch = function(){console.log("键盘输入了")
}
function debounce(fn,time){let timer = null;let context = this;return function(...args){clearTimeout(timer);timer = setTimeout(()=>{fn().apply(context,args)},time)}
}
window.addEventListener("keyup",debounce(handleSearch,500))

节流：节流是在事件被触发时，函数会按照一定的时间间隔进行执行，而不是每次触发都执行

适用场景：节流适合在间隔一段时间就要执行的事件，如：
1、页面滚定：用户滚动会触发scroll事件，使用节流可以限制事件函数执行的频率
2、操作鼠标事件：鼠标mouseup、mousedown等事件
3、按钮点击：防止用户短时间内频繁点击，造成重复提交

节流代码：

function throttle(time,fn){let lastTime = 0; // 上次执行时间 第一次默认是0const context = this;return function(...args){const now = Date.now();if(now - lastTime > time){lastTime = now;fn().apply(context,args)}}
}
const handleSearch = function(){console.log("鼠标滚动了")
}
window.addEventListener("scroll",throttle(handleSearch,500))

防抖和节流区别

比较维度	防抖	节流
定义	事件触发后，延迟事件处理函数，若在规定时间内又触发了事件，则重新计时，只有在规定时间到了才执行事件	事件触发后，函数会按照固定时间间隔执行
触发时机	最后一次执行事件后	按照固定时间间隔
适用场景	窗口调整、输入框联想搜索、表单验证	滚动条滚动、按钮点击、鼠标移入、移出等
原理	延迟技术， 在指定时间到了才会执行	记录上次执行时间或设置定时器