Da JavaScript im selben Thread wie die UI ausgeführt wird, kann eine Bildlaufereignisrückruf die UI blockieren -thread und damit Verzögerung verursachen. Sie müssen den Scroll-Ereignis-Listener drosseln, da einige Browser viele davon auslösen. Vor allem, wenn Sie mit einem analogen Scroll-Gerät auf OS X arbeiten. Da Sie in Ihrem Listener viele Höhenberechnungen durchführen, ist it will trigger a reflow (sehr teuer) für jedes Scroll-Ereignis, das ausgelöst wird.
Um den Hörer zu drosseln, müssen Sie verhindern, dass der Hörer jedes Mal feuert. Normalerweise warten Sie, bis der Browser kein Ereignis für x Millisekunden auslöst oder eine Mindestzeit zwischen dem Aufruf Ihres Callbacks hat. Versuchen Sie, den Wert anzupassen, um den Effekt zu sehen. Sogar 0 Millisekunden können helfen, da es die Ausführung des Callbacks verzögert, bis der Browser Zeit hat (normalerweise 5-40 ms).
Es ist auch eine gute Übung, eine Klasse umzuschalten, um zwischen Zuständen (statische und feste Position) zu wechseln, anstatt sie in JavaScript hart zu codieren. Dann haben Sie eine sauberere Trennung von Bedenken und avoid potential extra redraws by mistake (siehe Abschnitt "Browser sind intelligent").(example on jsfiddle)
Warten auf eine Pause von 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));
};
Warten Sie mindestens 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 Da du bist bereits mit jQuery, würde ich mir dieansehenPlugin, das eine einfache und elegante Lösung für Ihr Problem hat. Definieren Sie einfach einen Rückruf, wenn der Benutzer zu einem bestimmten Wegpunkt scrollt.
Beispiel: (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
});
});
Ich würde vermuten, es ist etwas mehr zu tun, wie Scroll Firefox hat Lockerung und wie Gecko/Rhino Feuer/interpretiert das Scroll-Ereignis anders aus anderen Browsern als alles andere, ist es so will wahrscheinlich etwas schwer zu beheben immer noch mit der 'Scroll' Listener-Ansatz, und ich sehe keine andere mögliche Ansatz atm, aber viel Glück Mann. –