2
  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中的宏任务,在主线程代码执行完毕之后才会执行其中的回调方法。


ZARR
64 声望9 粉丝

想成为全栈的小前端