Desde JavaScript se ejecuta en el mismo hilo como la interfaz de usuario, una devolución de llamada evento de desplazamiento se puede bloquear la interfaz de usuario -hecho y por lo tanto causa retraso. Necesita acelerar el escucha de eventos de desplazamiento porque algunos navegadores disparan muchos de ellos. Especialmente si tiene OS X con un dispositivo de desplazamiento analógico. Dado que realiza muchos cálculos de altura en su oyente, it will trigger a reflow (muy caro) por cada evento de desplazamiento que se dispara.
Para estrangular al oyente, debe evitar que el oyente se active siempre. Por lo general, esperas hasta que el navegador no desencadene un evento durante x milisegundos o que tengas un tiempo mínimo entre llamar a tu devolución de llamada. Intenta ajustar el valor para ver el efecto. Incluso 0 milisegundos pueden ayudar, ya que retrasará la ejecución de la devolución de llamada hasta que el navegador tenga tiempo (generalmente 5-40 ms).
También es una buena práctica alternar una clase para alternar entre estados (posición estática y fija) en lugar de codificarla en JavaScript. Luego tiene una separación más clara de preocupaciones y avoid potential extra redraws by mistake (consulte la sección "Los navegadores son inteligentes").(example on jsfiddle)
Espere una pausa de x ms
// return a throttled function
function waitForPause(ms, callback) {
var timer;
return function() {
var self = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(self, args);
}, ms);
};
}
this.start = function() {
// wrap around your callback
$window.scroll(waitForPause(30, self.worker));
};
esperar al menos x ms (jsfiddle)
function throttle(ms, callback) {
var timer, lastCall=0;
return function() {
var now = new Date().getTime(),
diff = now - lastCall;
console.log(diff, now, lastCall);
if (diff >= ms) {
console.log("Call callback!");
lastCall = now;
callback.apply(this, arguments);
}
};
}
this.start = function() {
// wrap around your callback
$window.scroll(throttle(30, self.worker));
};
jQuery waypoints Ya que estás Ya usando jQuery, echaré un vistazo al jQuery Waypoints plugin que tiene una solución simple y elegante para su problema. Simplemente defina una devolución de llamada cuando el usuario se desplaza a un determinado waypoint.
Ejemplo: (jsfiddle)
$(document).ready(function() {
// throttling is built in, just define ms
$.waypoints.settings.scrollThrottle = 30;
$('#content').waypoint(function(event, direction) {
$(this).toggleClass('sticky', direction === "down");
event.stopPropagation();
}, {
offset: 'bottom-in-view' // checkpoint at bottom of #content
});
});
supongo que es algo más que ver con la forma en Firefox tiene desplazamiento aliviar y cómo los incendios Gecko/Rhino/interpreta el evento de desplazamiento diferente a otros navegadores que cualquier otra cosa, por lo que se probablemente sea algo difícil de arreglar aún usando el enfoque del oyente 'scroll', y no veo ningún otro enfoque posible de cajero automático, pero mejor hombre. –