js节流防抖

防抖

就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

function fn1() {
    console.log(0)
}
function debounce(fn, delay) {
    let timer = null // 计时器    
    return function () { // 借助闭包
        if (timer) {
            clearTimeout(timer)
            timer = setTimeout(fn, delay)
        } else {
            timer = setTimeout(fn, delay)
        }
    }
}
debounce(fn1, 1000)

节流

就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

function fn1() {
    console.log(0)
}
function throttle(fn,delay){
    let flag=true;
    return function(){
        if(!flag){
            return false
        }
        flag=false
        setTimeout(()=>{
            fn()
            flag=true
        },delay)
    }
}

结合应用场景

防抖

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断