跳转至

JavaScript中的防抖和节流

函数防抖(debounce)

短时间内多次触发同一事件, 只执行最后一次, 或者只执行最开始的一次,中间的不执行

代码的中心思想就是闭包,外层函数返回内层函数的调用,内层函数进行具体的业务处理, 装饰器????

    let debounce = (f, t) => {
        let flag;
        let func = (...args) => {
            if (flag) clearTimeout(flag);
            flag = setTimeout(() => f(args), t)
        }
        return func
    }


    let func1 = (res) => console.log(res)
    let f = debounce(func1, 300)

    for (let i = 0; i < 100; i++) {
        f(2,3,34)
    }

节流(throttle)

指连续触发事件但是在 n 秒中只执行一次函数, 即 2n 秒内执行 2 次... , 节流如字面意思,会稀释函数的执行频率

    let func1 = (res) => {
        console.log(res)
    }

    let throttle = (f, t) => {
        let flag;
        let func = () => {
            if (!flag) {
                flag = setTimeout(()=>f(),t)
            }
        }
        return func
    }
    f = throttle(func1, 1000);

    f()
    f()
    f()
    f()