在进行窗口的resize、scroll,输入框内容校验,防止按钮重复点击等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,体验糟糕。所以可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
我们一起先来看看防抖和节流的区别
名称 | 相同点 | 区别 |
---|---|---|
防抖 | 都是防止函数多次被调用 | 重复调用时,只有最后的一次会执行 |
节流 | 重复操作时,间隔一定的时间才调用 |
防抖函数 debounce
// 防抖
function debounce(fn, wait = 20) {
let timeout = null
return function() {
if (timeout !== null) {
clearTimeout(timeout)
}
timeout = setTimeout(fn, wait)
}
}
节流函数 throttle
// 节流
function throttle(fn, delay = 20) {
let last = Date.now()
return function() {
let now = Date.now()
if (now - last > delay) {
fn()
last = now
}
}
}
如何调用
function handle() {
console.log('你点我了,在这里执行你想要执行的操作!')
}
// 防抖调用方式
document.querySelector('button').onclick = debounce(handle, 300)
// 节流调用方式
document.querySelector('button').onclick = throttle(handle, 300)
防抖和节流都利用了闭包,首先就调用了debounce和debounce方法,把内部的方法返回出去,下次自己执行,以后有时间我再写一下闭包吧,所以我还留下一个问题,这样会不会造成内存泄漏?
网友评论