节流
function throttle (fn,delay=100){
let timer = null
return {
if(timer){
return
}
timer = setTimeout(()=>{
fn.apply(this,argument)
timer = null
},delay)
}
}
防抖
function debounce(fn,delay=500){
let timer = null
return {
if(timer){
clearTimeout(timer)
}
timer =setTimeout(()=>{
fn.apply(this,argument)
timer = null
},delay)
}
}
节流和防抖的区别 及应用场景
区别:
防抖:就是指触发事件后,在N秒后函数才会执行,如果n秒内又触发了事件,则会重新计算函数执行时间。
节流:就是指连续触发事件,但是在n 秒中只执行一次函数
总结:::函数节流不管事件触发有多频繁,都会在规定的时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数
在前端开发中会遇到一些频繁的事件触发,例如input,keyup,keydown,scroll,resize,mousemove等,这非常影响性能,所以我们需要控制它们触发的频率,方法就是防抖与节流。
应用场景
防抖:
1、搜索框搜索输入,只需用户最后一次输入完,再发送请求。
2、手机号、邮箱验证输入检测
3、窗口大小Resize,只需窗口调整完成后,计算窗口大小。防止重复渲染
节流:
1、滚动加载、加载更多、滚到底部监听。
2、谷歌搜索框、搜索联想功能
3、高频点击、表单重复提交