防抖和节流

2023/3/11

手撕代码

防抖：事件触发–>开启定时器–>若再次触发，清除上一个定时器，用新的定时器–>定时器时间到，触发操作

实现：

function debounce(fn,delay){
    let timer = null;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,arguments);
            //this是调用debounce的作用域的this
        },delay)
    }
}

防抖会出现一个问题：事件会一直等到用户操作完一段时间后再进行操作，如果一直在操作，会一直不触发，在某些场景下不适用。

节流：减少流量，将频繁触发的事件减少，并每隔一段时间执行，即控制时间触发的频率。事件触发–>执行操作–>关闭阀门–>阀门关闭，后续触发无效–>一定时间后阀门打开–>操作可以再次触发

实现：

function throttle(fn,delay){
    let flag = true;
    return function(){
        if(flag){
            setTimeout(()=>{
                fn.apply(this,arguments);
                flag = true;
            },delay)
            flag = false;
        }
    }
}

时间戳实现节流函数：

function throttle(fn,delay){
    let pre = 0;
    return function(){
        let now = new Date();
        if(now - pre > delay){
            fn.apply(this,arguments);
            pre = now;
        }
    }
}

LOADING...

防抖和节流