零零散散之节流和防抖

节流和防抖

一个常见的事情，比如我在项目中遇到的滚动监听，有这样一个需求，滚动到一定程度，就会出现一个滚到顶部的按键。

我们可以发现这个滚动监听触发频率太高了，随便动一下都有好多条数据。

防抖

第一次触发事件时，不立即执行函数，而是限定一个期限值，比如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)