防抖和节流目的:都是优化高频率触发执行 js 代码的一种手段
防抖
触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,那么就会重新计算时间
实现:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法
缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟
应用场景
1. 输入框搜索:一般的输入框绑定输入事件,每次触发就要请求接口的话,会给服务器带来巨大的压力,所以会用到防抖
规定时间为 200ms,当输入后 200ms 没有操作,才会触发接口
2. 窗口 resize。只需窗口调整完成后,计算窗口大小。防止重复渲染
function debounce (fn) {
let timerout = null
return function () {
let args = arguments
let self = this
clearTimeout(timerout)
timerout = setTimeout(() => {fn.apply(self, args) // 传参数
}, 200);
}
}
window.addEventListener('scroll', debounce(function () {console.log(1)
}))
节流
规定在 n 秒内,只能触发一次函数。如果在 n 秒内触发多次函数,只有一次生效
实现:当触发事件时,判断有没有正在执行的函数,直接 return
应用场景
1. 高频点击提交,表单重复提交
function throttle (fn) {
let timerout
return function () {
let args = arguments
let self = this
if (timerout) return
timerout = setTimeout(() => {fn.apply(self, args)
timerout = null
}, 200);
}
}
window.addEventListener('resize', throttle(function () {console.log(1)
}))