Throttle JS 事件监听器由 3rd 方库添加

Question

我想限制由外部供应（无法更改）提供的第 3 方库作为事件侦听器添加到 window.scroll 函数的函数调用。

我发现该库的滚动事件侦听器会导致一些开销，因为如果我删除事件处理程序，我的页面运行会更流畅。

因为我无法直接控制或更改外部 JS 文件，所以我想读取附加到 Window 的滚动事件并再次删除/重新绑定它们，但以节流格式，因为我已经这样做了Underscore.js 库正在使用中。

我正在尝试读取滚动事件，而不是将函数回调替换为节流版本：

  jQuery(document).ready(function($) {
    let scrollEvents = $._data(window, 'events').scroll;
    for(evt of scrollEvents ) { 
      evt.handler = _.throttle(evt.handler, 200) 
    }
  });

似乎没有带来相应的提升。在 Webdeveloper Bar 的“全局事件监听器”中，我仍然看到附加的原始事件监听器，我没有看到 Underscore 库（作为中间层）列在那里。

这段代码可能有什么问题？

谢谢

编辑这些事件被全局添加到 Window，请参见 WebDev 屏幕截图：和我运行 WebDev 控制台中的上述代码，所以它运行只有在这些事件已经存在之后。

AND $._data(window, 'events').scroll; 显示了所有这 5 个事件，所以 jQuery 应该可以更改它们，不是吗？

Answer 1

使用 Underscore.js 找到了一个漂亮的解决方案，在将其添加为事件处理程序之前通过 Throttler 代理回调函数：

    var f_add = EventTarget.prototype.addEventListener;
    var f_remove = EventTarget.prototype.removeEventListener;

    EventTarget.prototype.addEventListener = function(type, fn, capture) {
        this.f = f_add;
        if(type == 'scroll' && typeof _ === 'function') 
            fn = _.throttle(fn, 350);
        this.f(type, fn, capture);
    }

    EventTarget.prototype.removeEventListener = function(type, fn, capture) {
        this.f = f_remove;
        if(type == 'scroll' && typeof _ === 'function')
            fn = _.throttle(fn, 350);
        this.f(type, fn, capture);
    }

它会覆盖 add/removeEventListener 的原型 -> 如果事件是滚动事件，它会用 _.throttle() 包围函数 fn。

Throttle JS 事件监听器由 3rd 方库添加

Throttle JS Event Listeners added by 3rd party library

javascript

event-handling

underscore.js

throttling