2016-07-09 6 views
0

Ich habe ein Plugin, das mir sagt, ob ein Element im Ansichtsfenster mit $('#element').visible() sichtbar ist (auf true gesetzt, wenn sichtbar).Verhindere den Aufruf von AJAX auf Bildlauf, wenn bereits

Jetzt möchte ich eine Funktion erstellen, die ich eine Seite nach unten scrollen und neuen Inhalt mit Ajax laden. Ich habe dies so weit:

window.onscroll = function() { 
    console.log($('#ele').visible()); 

    if ($('#ele').visible()) { 
       //ajax call comes here 
    } 

}; 

Sobald ich das Element zu sehen, mein Protokoll zeigt true:

enter image description here

Ich habe keine Probleme haben jetzt die Ajax-Anfrage Umsetzung, aber shouldn‘ t Blockiere ich diese Funktion nur einmal? Wie kann ich verhindern, dass ein neues Element, das bereits geladen wurde, erneut geladen wird (die Verwendung von Ajax wird verhindert)?

Ich dachte an eine Boolean-Variable, aber mein Problem ist, dass ich nicht weiß, wie man das implementiert, denn wenn ich eine Variable setze, wie würde der Browser seinen Wert wissen? Denn bei jeder Bewegung meines Mausrads kann es sich nicht erinnern, was der Wert dieser Variablen war?

EDIT:

habe ich versucht, den Code von Ismail und erreicht nie den Ajax-Aufruf (Alarm wird nicht angezeigt).

window.onscroll = function() { 
    var ajaxExecuted = false; 
    var ele = $('#load_more').visible(); 
    console.log(ele); 

    return function() { 
     if (ajaxExecuted) return; 

     if (ele) { 
      alert("OK"); 
      var ajaxArray; 
      ajaxArray = { page: 2 } 
      ajaxLoadContent(ajaxArray, "load_more", "ajax_load"); 
      ajaxExecuted = true; 
     } 
    } 
}; 

Antwort

1

können Sie verwenden:

window.onscroll = (function() { 
    var ajaxExecuted = false; 
    return function() { 
     if(ajaxExecuted) return; 

     if ($('#ele').visible()) { 
       $.ajax({...}).success(function() { 
        //Your code here; 
        ajaxExecuted = true; 
       }); 
     } 
    } 
})(); 
+0

Vielen Dank für Ihre Antwort. Ich werde das jetzt versuchen. Meine Frage dazu ist, wie weiß der Browser, dass der Wert der Variablen ajaxExecuted? Ich meine, was genau ist der Hintergrundprozess Schritt für Schritt? – AlexioVay

+0

Also habe ich das versucht, aber der Code kommt nie an 'if (ajaxExecuted) zurück,' weil er danach auf true gesetzt wird? – AlexioVay

+0

Die äußere Funktion ist ein 'sofort aufgerufener Funktionsausdruck ', der eine Funktion (den Event-Handler) zurückgibt. Der Event-Handler wird innerhalb des IIFE-Funktionsumfangs ausgeführt, wobei "ajaxExecuted" verfügbar ist. –

1

Eine einfache Lösung: Setzen Sie einen booleschen Wert auf true, wenn das Element zuerst sichtbar wird, und setzen Sie es auf false, wenn es nicht mehr sichtbar ist. Feuern Sie die Anfrage nur dann ab, wenn diese Zustände nicht übereinstimmen (dh wenn es sichtbar ist, aber der Boolesche Wert falsch ist - das heißt, es ist das erste Mal, dass Sie das Fenster sehen. Sie würden das Bool danach setzen, damit es nicht mehr auslöst verschwindet und erscheint wieder).

+0

Mein Problem ist, dass ich weiß nicht, wie zu implementieren, dass, weil, wenn ich eine Variable, wie würde der Browser weiß, dass es Wert ist, weil auf jeder Bewegung meines Mausrad es kann mich nicht erinnern, was der Wert dieser Variable ist? – AlexioVay

+0

Haben Sie es schon probiert? Wenn Sie nicht verrückt werden, sollten Sie in der Lage sein, einen über Ihrer Funktionsdeklaration zu erstellen und ihn auf false zu setzen und dann in der Funktion zu ändern. –

+0

Ich habe meine Frage mit dem Code von Ismail aktualisiert. Vielleicht kannst du mir auch helfen? – AlexioVay

Verwandte Themen