防抖节流

原创已于 2024-02-28 19:52:10 修改 · 677 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-02-28 19:49:35 首次发布

本文介绍了JavaScript中的防抖和节流技术，通过定时器控制函数执行，避免短时间内频繁触发导致资源浪费。防抖在固定时间内只触发一次，而节流则是固定时间内只执行一次。还提到了lodash库提供的防抖和节流方法实现。

防抖

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

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

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)
        }
    }