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中的宏任務，在主線程代碼執行完畢以後纔會執行其中的回調方法。