函数节流与防抖的简单版实现

294 阅读1分钟
//1. 函数节流:当连续触发命令时,每隔一段时间内,只执行一次命令。

    function fn() {
        console.log(1)
    }

    function throttle(fn, delay) {
        let timer = undefined
        return function () {
            let args = Array.from(arguments)

            if (!timer) {
                timer = setTimeout(() => {
                    fn.call(this, ...args)
                    timer = undefined
                }, delay)
            }
        }
    }

    fn2 = throttle(fn, 2000)
    window.onscroll = fn2
    //函数节流可以用于自动保存。

    //2. 函数防抖
    //   防抖的原理就是:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件
    //触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是
    //要等你触发完事件 n 秒内不再触发事件,我才执行.

    function debounce(fn,delay) {
        let timer = undefined
        return function() {
            let args = Array.from(arguments)

            if(timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.call(this,args)
                timer = undefined
            }, delay)
        }
    }

函数节流和防抖都是用于限制执行频率的。