侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

函数防抖和函数节流

woku
2022-03-07 / 0 评论 / 0 点赞 / 94 阅读 / 895 字

函数防抖和函数节流就是两个函数,这两个函数有着特殊的作用

函数防抖

作用:

  • n秒之内频繁触发事件,每次触发都会重新开始计时
  • n秒之内频繁触发事件,不执行事件处理函数
  • 触发事件n秒之后,执行事件处理函数

应用场景

发送ajax请求、检查表单数据

这里要考虑的一个问题是第一次触发的时候是不是需要延迟
像发送ajax请求这种,第一次触发应该马上执行,而不应该延迟

封装

        // fn:回调函数 、time:延迟时间、 triggleNow:是否立即触发

        function debounced(fn, time = 1000, triggleNow = false) {
            var t = null
            var debounced = function() {
                var _self = this,
                    args = arguments
                clearTimeout(t)
                if (triggleNow) {
                    var exec = !t
                    t = setTimeout(() => {
                        t = null
                    }, time);
                    if (exec) {
                        fn.apply(_self, args)
                    }
                } else {
                    t = setTimeout(function() {
                        fn.apply(_self, args)
                    }, time);
                }
            }
            debounced.remove = function() {
                clearTimeout(t)
                t = null
            }
            return debounced
        }

函数节流

作用

事件被触发,n秒之内只执行一次事件处理函数

封装

    function throttle(fn, delay) {
            var t = null,
                begin = new Date().getTime()
            return function() {
                var _self = this,
                    args = arguments,
                    cur = new Date().getTime()
                clearTimeout(t)
                if (cur - begin >= delay) {
                    fn.apply(_self, args)
                    begin = cur
                } else {
                    t = setTimeout(() => {
                        fn.apply(_self, args)
                    }, delay);
                }
            }
    }

总结

节流: 限制执行频率,有节奏的执行
防抖:限制执行的次数,多次密集的触发只执行一次
节流关注“过程”,防抖关注“结果”

0

评论区