节流防抖的区别以及写法

6,144 阅读2分钟
2021-11-23前段时间楼主在学习过程中,又学习到了不同的节流,今天才想起写上来,惭愧惭愧

节流

节流简单来说就是在当前函数完成前的重复多次点击当中,只执行第一次点击,在第一次点击完成前,后面的点击都会无效

  1. 节流有多种不同应用场景的表现形式,一般可以分为三种,分别是首节流,尾节流,兼顾型节流。
  2. 首节流,第一次会马上执行,之后的操作不一定会执行。可以理解问第一次执行,最后一次不执行。
  3. 尾节流,第一次不会马上执行,而是一段时间后在执行。可以理解为第一次不执行,最后一次执行。
  4. 兼顾型节流,第一次会马上执行,最后一次也会执行。
  5. 概念不理解的可以先看代码就一目了然啦。

首节流

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

以上代码不难看出,在第一次操作的时候就会执行一遍fn,之后的操作如果时间不超过delay(例如2s)就不会在执行函数,理解为第一次执行,最后一次不执行。

尾节流

function throttle(fn, delay) {
    let timer = null;//通过闭包使变量timer存在着

    return function () {
        let context = this; //使下面的apply有正确的指向
        let args = arguments;

        if (!timer) {
            timer = setTimeout(function () { 
                //使用箭头函数,就不用使用apply来改变this指向
                fn.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}

尾节流中,第一次是不会直接执行的,而是在一段时间后再执行。理解为第一次不执行,最后一次执行。

兼顾型节流

function throttle(fn, delay){
    let last=0;
    let timer=null;

    return function(){
        let now=Date.now();
        let reming=delay-(now-last);

        clearTimeout(timer);//不管三七二十一,有定时器都先清除定时器
        if(reming<0){
            fn.apply(this, arguments);
            last=now;
        }else{
            timer=setTimeout(()=>{
                fn.apply(this,arguments);
            }, reming);
        }
    }
}

兼顾型节流,就能够在第一次,最后一次都执行代码。

各有自身的应用场景。

防抖

防抖跟节流正好相反,防抖是在多次点击中,只执行最后一次,前面的点击都会被取消

function debounce(fn, delay) {
    let timer = null;

    return function () {
        clearTimeout(timer);
        let context = this;
        let args = arguments;

        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

防抖与节流一般在哪里使用

防抖

当用户在短时间内,多次点击登陆,发送短信等请求数据的操作时 文本编辑器一段时间不操作,进行自动保存 搜索框进行联想,用户不断输入值,只在停顿1s时才进行联想

节流

鼠标mouseover事件,只执行一次时 浏览器滚动,每隔1s才计算一次位置信息,避免边滚动边计算

以上为个人理解,如有不对,请留言