防抖 节流

防抖

防抖就是防止在用户操作页面的时候短时间内多次重复触发同一个函数，减少资源的浪费

设置一个函数 开启一个定时器 如果事件在限定的时间内再次触发则清除定时器 在次写一个定时器在固定的时间结束触发

function debounce(timeout, fn) {
        let time = null
        return function () {
            let _arg = arguments
            clearTimeout(time)
            time = setTimeout(() => {
                fn.apply(this, _arg)
            }, timeout)
        }
    }

节流

节流就是在用户执行完上一个操作后才去执行下一个操作 或者 在规定时间内执行一次 也是减少资源的浪费

function throttling (timeout, fn) {
        let _playing = null
        return function () {
            let _arg = arguments
            if (_playing) {
                return
            }
            _playing = true
            setTimeout(() => {
                fn.apply(this, _arg)
                _playing = false
            }, timeout)
        }
    }

总结

防抖和节流都是通过定时器实现

减少计算机资源的浪费

节流是固定时间内只触发最后一次

防抖是固定时间内只触发一次

也可以使用loadash实现防抖节流 

防抖

_.debounce(func, [wait=0], [options=])

节流

_.throttle(func, [wait=0], [options=])

func (Function): 要防抖动的函数。

[wait=0] (number): 需要延迟的毫秒数。

[options=] (Object): 选项对象。

[options.leading=false] (boolean): 指定在延迟开始前调用。

[options.maxWait] (number): 设置 func 允许被延迟的最大值。

[options.trailing=true] (boolean): 指定在延迟结束后调用。