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才计算一次位置信息，避免边滚动边计算

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