js手写防抖节流

//节流：就像自来水龙头，固定间隔执行一次函数，减少函数执行频率

//防抖：如果一直按键盘，那只有最后一次才会触发函数，防止频繁触发，等待一段时间后执行

  
  


// 防抖

function debounce(fn, delay = 300) {

    //默认300毫秒

    let timer;

    return function () {

        const args = arguments;

        if (timer) {

            clearTimeout(timer);

        }

        timer = setTimeout(() => {

            fn.apply(this, args); // 改变this指向为调用debounce所指的对象

        }, delay);

    };

}

  
  


window.addEventListener(

    "scroll",

    debounce(() => {

        console.log(111);

    }, 1000)

);

  


// 节流

// 设置一个标志

function throttle(fn, delay) {

    let flag = true;

    return () => {

        if (!flag) return;

        flag = false;

        timer = setTimeout(() => {

            fn();

            flag = true;

        }, delay);

    };

}

  


window.addEventListener(

    "scroll",

    throttle(() => {

        console.log(111);

    }, 1000)

);