防抖函数高级写法

新手上路,请多包涵

防抖函数是否有更高级的写法

相关代码

    function debounce(fn) {
        let timeout = null;
        return function () {
            if(!timeout) {
                fn.apply(this,arguments);
                timeout = setTimeout(() => {
                    // clearTimeout(timeout); // 清除定时器操作
                    timeout = null
                }, 500);
            }
        }
    }

    function say(e) {
        console.log('防抖了哦',e)
    }

    btn.addEventListener('click', debounce(say))

防抖有两种写法,一种是先执行函数,第二种是后执行函数。这里写的是前者。

思路

  1. 将我们我们需要的函数(既say函数)进行防抖化
  2. 在绑定监听事件中,防抖函数执行,返回一个闭包函数
  3. 每次点击执行该闭包函数
  4. 第一次点击,立即执行say函数,当在规定的时间内再次点击时,say函数不执行
  5. 等规定时间过后,点击方可执行

问题

  1. 通过在setTimeout函数里 执行timeout = null,而不执行清除函数的操作可以达到效果,但是这样做可行?
  2. 改函数返回一个闭包函数,是否会有内存泄漏以及在点击多次后对内存产生的一些影响

特此鸣谢前来围观的各路侠客

希望大佬们能多维度的评价这种写法的好与坏,以及可用性等。
因此方交流,而不忘于江湖[抱拳]

阅读 2.9k
2 个回答

timer=null是在定时器回调里执行的,不需要再手动清理一遍。

这个实现不存在内存泄露

先不说计时器的问题,如果点击事件足够快,你的debounce函数每隔500ms执行一次,我怎么感觉这个是叫节流呢。。。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题