[JavaScript] Ajax Loading on Scroll

[cppnap]

Guten Tag,

ich habe hier eine JS-Script gebaut, welches Content aus dem Backend nach lädt sobald das Ende der Webseite erreicht ist.
Jetzt ist im Nachhinein noch ein Footer dazu gekommen, so dass der Loader los gehen soll, wenn er den Footer erreicht hat.

Ich habe jetzt das Problem, dass ich nicht weiß wie ich das realiseren soll, damit er wirklich auch nur 1 mal nach lädt. 3 Möglichkeiten habe ich nun ausprobiert

jQuery(window).scroll(function () {
    if ((jQuery(window).scrollTop() + jQuery(window).height() >= jQuery(document).height() - 600)) {
      // to-do
    }
});

Das kann ich nicht benutzen, da er hier x-mal immer wieder bei einem Scrolldown nach lädt. Ich habe hier auch schon eine Variable eingebunden, die auf 0 gesetzt wird beim ersten Triggern und erst wieder auf 1 geht, wenn die Ajax-done Funktion erreicht wird. Allerdings bringt das nix.

jQuery(window).scroll(function () {
    if ((jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height() - 600)) {
      // to-do
    }
});

Das kann ich auch nicht benutzen, da das == nie erreicht wird und er sozusagen gar nicht nach lädt.

Frage ist nun einfach, wie realisiere ich das, dass er ab einem gewissen Mindestabstand zum Ende der Seite genau 1 mal nach lädt

vielen Dank schon mal :-)

 

[Teisi]

Hallo,

verstehe ich nicht, warum geht das mit der Variable nicht?

außerhalb deines ganzen konstruktes setzt du eine variable = 0;
innerhalb deines To-Do if variable gleich 0 -> mach was und setzte variable auf 1

dann kann er nur einmal das entsprechende innerhalb der if abfrage ausführen, egal wie oft du wohinscrollst...

 

[cppnap]

var scrolldelay = 1;
jQuery(window).scroll(function () {
    if ((jQuery(window).scrollTop() + jQuery(window).height() >= jQuery(document).height() - 600) && scrolldelay === 1) {
        scrolldelay = 0;
        jQuery.ajax({
            type: "POST",
            url: action,
        }).done(function (data) {
            // to do
            scrolldelay = 1;
        });
    }
});

So hatte ich es versucht - geht aber nicht - warum weiß ich auch nicht wirklich

 

[Teisi]

ja das kann ja nicht funktionieren - oder ich versteh nicht ganz was du genau möchtest - jedenfalls:

wenn du dein scrolldelay wieder auf 1 setzt nach dem ajax ist es schon klar, das beim nächsten Scrollen er wieder in die schleife geht, mach das weg und es klappt.