相同点:防抖和节流都是为了解决频繁触发事件而导致性能问题的方法。
区别:防抖只执行最后一次,节流有规律的执行
1. 防抖
防抖是指在一定时间内,如果事件被触发多次,只执行最后一次。比如说,用户在输入框中输入文字时,我们希望在用户输入完毕后再进行搜索操作,而不是在每次输入时都进行搜索。这时候就可以使用防抖。
防抖实现代码:
function debounce(fn, delay) {
let timer = null
return function () {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}
2. 节流
节流是指在一定时间内,无论事件被触发多少次,只执行一次。比如说,用户在滚动页面时,我们希望在用户停止滚动后再进行某些操作,而不是在每次滚动时都进行操作。这时候就可以使用节流。
节流实现代码:
function throttle(fn, delay) {
let timer = null
return function () {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
}
吾虽不才,志在千里;行虽不畅,心向往之!