Aktualisierung, wenn Bildlauf bis Ende der Seite funktioniert ... aber die Aktualisierung wird fortgesetzt

Question

Ich habe ein Bildlaufereignis in einer VueJS-Komponente, die diesen Code enthält. Im Wesentlichen, wenn ich das Ende des Dokuments erreiche, aktualisiert es Jobs() über AJAX.

if (windowScrollTop >= (documentHeight - windowHeight - 50)) 
{ 
     this.updateJobs(); 
} 

Jetzt funktioniert das und die Jobs werden aktualisiert und angezeigt. Das Problem ist, dass es nicht aufhören wird; Aus irgendeinem Grund wird es aktualisiert, bis es alle Seiten von Daten herauszieht.

Ich nahm an, dass es nach der ersten Aktualisierung stoppen und rendern würde, da die if Anweisung dann falsch wäre. Das Scroll-Ereignis wird jedoch ausgelöst, ohne dass die verschiedenen Positionen und Höhen aktualisiert werden, um die neue Position (nicht am Ende des Dokuments) mit den neuen Daten wiederzugeben.

Sollte ich einfach eine setTimeout hinzufügen, damit es Zeit zum Rendern geben? Gibt es eine bessere Lösung?

Answer 1

Dies passiert, weil Sie windowScrollTop >= (documentHeight - windowHeight - 50 verwenden, was bedeutet, dass windowScrollTop 50 Chancen hat, größer oder gleich zu 50 px der Seitenhöhe zu sein.

Also besser es Ihnen für einen anderen Zustand überprüfen auch

var scrollUpdateFired = false; 
if (windowScrollTop >= (documentHeight - windowHeight - 50) && !scrollUpdateFired) 
{ 
     scrollUpdateFired = true; 
     this.updateJobs(); 
} 

dann in Ihrer AJAX Versprechen Erfolg Rückruf den Wert von scrollUpdateFired-false