js 函数防抖和节流

1. 函数节流

    function throttle(fn, delay = 2000) {
        let Timer = null

        return function () {

            let Now = +new Date()

            if ( Now - Timer >= delay || !Timer) {
                fn.call(this, ...arguments)
                Timer = Now
            }
        }
    }

1. 函数防抖

    function debounce(fn, delay = 300) {
        let Timer

        return function() {
            let _arg = arguments
            let _this = this

            if (Timer) {
                clearTimeout(Timer)
            }

            Timer = setTimeout(() => {
                fn.apply(this, _arg)
            }, delay);
        }
    }

总结:

其实函数节流和防抖都是闭包的运用，保存外部函数中的变量值，只不过节流是在多次操作中取第一次，而防抖是取多次操作中的最后一次，具体原因是因为setTimeout是eventloop中的宏任务，在主线程代码执行完毕之后才会执行其中的回调方法。