【JS基础】【节流&防抖】这可能是你见过的最容易理解的节流防抖函数

节流 - 指定时间内只触发一次

防抖 - 只执行最后一次触发

/**

* 模拟短时间大量触发函数执行的事件（如：scroll resize keyup）

* 每0.1秒触发一次打印， 5秒后停止触发

*/

let fn = (args) => {

    console.log(`exec fn ${args}`)

}

  


let intervalEvent = setInterval(() => {

    fn('普通执行');

    // 防抖函数
    debounce(fn, 1000);

    // 节流函数
    throttle(fn, 1000);

}, 100);


setTimeout(() => {

    clearInterval(intervalEvent)

}, 5000);

  


let debounce = (fn, delay) => {

    fn.id && clearTimeout(fn.id);

    fn.id = setTimeout(() => {

        fn.call(this, '防抖')

    }, delay);

}

  


let throttle = (fn, delay) => {

    if (fn.throttleId) {

        return;

    }

    fn.throttleId = setTimeout(() => {

        fn.call(this, '节流');

        clearTimeout(fn.throttleId);

        fn.throttleId = null;

    }, delay);

}

输出

exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 节流
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 节流
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 节流
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 节流
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 普通执行
exec fn 节流
exec fn 防抖

防抖只执行最后一次触发， 节流间隔执行