JS-防抖和节流（一）

应该有JS-防抖和节流（二）

前言

正如字面上的意思，可以做到防抖和节流。

方法的设计

1. 可以执行对象中的方法。通过传对象并使用apply改变this指向
2. 传config对象配置方法行为。可配置防抖和节流的事件，可配置是否立即执行

防抖

function myDebounce(obj = window, fn, { timer = null, time = 1000, flagFirstRun = false } = {}) {
    return (...argus) => {
        clearTimeout(timer)
        if (flagFirstRun) {
            flagFirstRun = false
            fn.apply(obj, [...argus])
        }
        timer = setTimeout(() => {
            flagFirstRun = true
        }, time)
    }
}

节流

function myThrottle(obj = window, fn, { timer = null, time = 1000, flagFirstRun = false } = {}) {
    return (...argus) => {
        if(flagFirstRun){
            flagFirstRun = false
            fn.apply(obj, [...argus])
        }
        if (!timer) {
            timer = setTimeout(() => {
                flagFirstRun = true
                clearTimeout(timer)
                timer = null
            }, time)
        }
    }
}

测试代码

var aa = 12
//如果这里使用let或者const，打印结果为undefined
//因为var声明的变量会收入到window中，而let/const声明的变量不会在window中
function asd(){
    console.log(this.aa)
}
let obj = {
    value: 13,
    foo: function (data) {
        console.log(this.value+data)
    }
}
const config = {
    timer: null,
    time: 1000,
    flagFirstRun: true,
}
const funDebounce = myDebounce(window, asd, config)
const funThrottle = myThrottle(obj, obj.foo, config)
setInterval(funDebounce, 1500)
setInterval(()=>{funThrottle(12)}, 1500)