节流和防抖
一个常见的事情,比如我在项目中遇到的滚动监听,有这样一个需求,滚动到一定程度,就会出现一个滚到顶部的按键。
我们可以发现这个滚动监听触发频率太高了,随便动一下都有好多条数据。
防抖
第一次触发事件时,不立即执行函数,而是限定一个期限值,比如200ms;当在200ms内再次触发,则清除上一次计时,重新计时;当超过200ms则重新触发。
function debounce() {
let timer = null
return function () {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(fn,delary)
}
}
节流
在上诉方案中,如果一个用户闲着无聊,一直拖着滚动条滚,那么就不会触发函数。
那么我们需要在某段时间之后也会触发函数,这就需要节流。
function debounce(fn,delary) {
let timer = 0
return function () {
if(Date.now()-timer>delary){
fn()
timer = Date.now()
}
}
}
// 测试代码
let col = () => console.log('4444')
let el = document.getElementById('test')
el.onmousemove = debounce(col,2000)