0
128
ViewsThrottle JS Event Listeners agregados por una biblioteca de terceros
Quiero acelerar las llamadas de función que se agregan como detectores de eventos a la función window.scroll por una biblioteca de terceros proporcionada por un proveedor externo (no se puede cambiar).
Me di cuenta de que la biblioteca causa cierta sobrecarga debido a su detector de eventos de desplazamiento, porque si elimino el controlador de eventos, mi página funciona mucho mejor.
Como no puedo controlar o cambiar directamente el archivo JS externo, pensé en leer los eventos de desplazamiento adjuntos a la ventana y eliminarlos/reenlazarlos nuevamente, pero en un formato acelerado, ya que ya tengo la biblioteca Underscore.js en uso.
Estoy tratando de leer los eventos de desplazamiento y luego reemplazar la función de devolución de llamada como una versión acelerada:
jQuery(document).ready(function($) { let scrollEvents = $._data(window, 'events').scroll; for(evt of scrollEvents ) { evt.handler = _.throttle(evt.handler, 200) } });No parece traer la mejoría adecuada. En la barra de desarrollo web "Oyentes de eventos globales" todavía veo los oyentes de eventos originales adjuntos, NO veo la biblioteca de guiones bajos (como capa intermedia) en la lista.
¿Qué es potencialmente incorrecto con este código?
Gracias
EDITAR Esos eventos se agregan globalmente a la ventana, vea la captura de pantalla de WebDev: 
y ejecuto el código anterior dentro de la consola WebDev, por lo que se ejecuta solo después de que esos eventos ya existen.
Y $._data(window, 'events').scroll; muestra TODOS esos 5 eventos, por lo que jQuery debería poder cambiarlos, ¿no?
1 answers
Answer question0
Encontré una hermosa solución usando Underscore.js, mandando las funciones de devolución de llamada por un Throttler antes de agregarlo como Controlador de eventos:
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); } Sobrescribe el prototipo de add/removeEventListener -> Y si el evento es un evento de desplazamiento, rodea la función fn con _.throttle().