一、防抖节流简易理解

1、防抖和节流的区别

• 防抖的目的是为了让函数虽然会多次执行，但是有效代码只能执行一次；
• 节流的目的是为了让函数虽然会多次执行，但是有效代码只会根据固定频率去执行；
• 当一起使用时都是为了函数的有效代码执行一次的时候，节流是为了降低有效代码的执行频率。

2、防抖

let timer = null;

    btn.onclick = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fetch("./data.json");
        }, 1000);
    }


 //防抖（输入框绑定输入事件）
    let timer = null;
    const debounce = (fn,delay)=>{
        clearTimeout(timer)
        return  ()=>{
            timer = setTimeout(()=>{
             fn()
        },delay);
        };
    }
    inp.oninput = debounce(function(){	
        console.log(this.value);
        
    },1000)

• 防抖：就是每次点击时都会把老的定时器给移除，然后再去重新建立一个新的定时器；
  • 用户触发多少次不管，只关心函数触发次数
  • 应用场景：一个是按钮的连续点击，另一个是input的连续输入

3、节流

let flag = true;
    btn.onclick = function () {
        if (!flag) return;
        flag = false;
        setTimeout(() => {
            flag = true;
        }, 1000);
        fetch("./data.json");
    };

//input绑定输入事件
let flag = true;
    const throttle = (fn, delay) => {
        if (!flag) return;
        flag = false;
        return () => {
            setTimeout(() => {
                fn();
                flag = ture;
            })
        };
    };
    inp.oninput = throttle(function () {
        console.log(this.value);

    }, 1000)

• 目的：就是降低函数触发频率
• 实现：设置一个标识，标识会在定时器执行完成之后再去改成代码能正常执行的值

• 场景：最多应用在scroll事件和touchmove事件\