Wie wird die JS-Funktion nur einmal ausgeführt?

Question

Ich möchte ein Popup auslösen, wenn der Benutzer zu einer bestimmten Element-ID von meiner Website scrollt.

Im Moment gelingt mir das, aber es funktioniert in einer Schleife und ich kann die Funktion nicht stoppen, nachdem es einmal ausgeführt wurde.

Folgt meinem JS-Code:

$(window).scroll(function() { 
var executed = false; 
    if (!executed){ 
    executed = true; 
     var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH)){ 
    <!-- 
    window.setTimeout('window.location="javascript:showSuccessToast();"; ',2000); 
    // --> 
    }} 
    }); 

Ich kann nicht verstehen, warum die Funktion ausführt, wenn "ausgeführt" Variable wahr wird. Wie kann ich es nur einmal feuern showsuccessToast?

Answer 1

Die var immer false gesetzt wird ausgeführt, wenn das Scroll-Ereignis eintritt. Was bedeutet, dass es in Ihrer Funktion nutzlos ist.

Setzen Sie die Ausführung der Ereignisfunktion sollte funktionieren.

var executed = false; 
$(window).scroll(function() { 
    var hT = $('#scroll-to').offset().top, 
    hH = $('#scroll-to').outerHeight(), 
    wH = $(window).height(), 
    wS = $(this).scrollTop(); 
if (wS > (hT+hH-wH)){ 
if (!executed){ executed = true; 
    <!-- 
    window.setTimeout('window.location="javascript:showSuccessToast();"; ',20); 
    // --> 
}} 
}); 

Answer 2

Ihre Funktion wird jedes Mal neu ausgeführt, wenn das Ereignis ausgelöst wird - dies beinhaltet die Initialisierung von executed. Mit anderen Worten, bei jeder Ausführung Ihrer Funktion setzen Sie executed zurück auf false!

Um dies zu beheben, müssen Sie außerhalb der Funktion der Variablendefinition ziehen:

var executed = false; 

$(window).scroll(function() { 
    if (!executed) { 
     executed = true; 

     ... 
    } 
}); 

Answer 3

Eine andere Möglichkeit wäre unbind() zu verwenden, wie die folgende JS-Code zeigt:

$(window).scroll(myScrollFunction); 
function myScrollFcuntion() 
{ 
    // do things 
    $(window).unbind("scroll", myScrollFunction); 
}