场景

        频繁触发耗时操作，仅关心最后一次的触发时使用防抖函数

代码

function debounce(fn , delay){
    let timer;
    return () => {
        clearTimeout(timer);
        timer = setTimerout(()=>{
            fn()
        },delay)
    }
}

详解

                

        触发一次函数，然后执行后续操作

function debounce(fn){
    fn()
}

        如果该函数在短时间内被频繁触发，就会导致卡顿

        我们可以加一个定时器，来限制触发

function debounce(fn , delay){
    setTimeout(()=>{
        fn()
    },delay)
}

        但是这么写会导致下面的结果

        我们只是延长了执行后续操作的时间，并没有解决反复执行的问题

        所以我们要在函数被再次触发时中断之前的函数

function debounce(fn , delay){
    let timer;
    clearTimeout(timer);
    timer = setTimeout(()=>{
        fn()
    },delay)
}

        但是这段代码还是有点问题，我们真的打断了上一个函数吗？

        我们创建的timer作用域和清除的timer作用域是一样的

        每次执行防抖我们都清除了一次timer ， 但是我们清除的timer也是我们新创建的timer，并不是上一个timer ， 所以我们要返回一个函数 ， 这样我们才是清除的上一步timer

function debounce(fn , delay){
    let timer;
    return () => {
        clearTimeout(timer);
        timer = setTimerout(()=>{
            fn()
        },delay)
    }
}

        这样我们清除的timer作用域是上一级的timer