Stop Animation von mehr als einmal spielen

Question

Ich habe diesen JS-Code. Immer wenn ich über das Skills-Div blättern muss, wird die Animation wiederholt. Ich möchte, dass es nur einmal geladen wird, wenn der Benutzer das div erreicht und sich dann nie wiederholt, es sei denn, die Seite wird erneut geladen.

$(function() { 
    var oTop = $('#skills').offset().top - window.innerHeight; 
    var x = true; 

    $(window).scroll(function(){ 

     var pTop = $('body').scrollTop(); 
     console.log(pTop + ' - ' + oTop); 
     if(pTop > oTop){ 
       start_doughnut_animation(); 

     } 
    }); 
}); 

Er wiederholt, auch wenn ich in der Mitte der Animation bewegen tut executed.I wird versucht, einen boolean verwenden, aber es funktioniert

Answer 1

können Sie eine Flag-Variable hinzufügen, so etwas wie:

$(function() { 
    var oTop = $('#skills').offset().top - window.innerHeight; 
    var x = true, 
     oneTime = false; 

    $(window).scroll(function(){ 

     var pTop = $('body').scrollTop(); 
     console.log(pTop + ' - ' + oTop); 
     if(pTop > oTop && !oneTime){ // check if oneTimeis also false 
       start_doughnut_animation(); 
       oneTime = true; // set oneTime so this can't happen again 
     } 
    }); 
}); 

Answer 2

sich eine Flucht aus der Schleife geben.

Zuerst prüfen, ob die Funktion ausgeführt wurde. Zum Beispiel "wenn var ausgeführt wird, ist false", dann führen Sie Ihre Animationsfunktion aus. Und am Ende der Animation, setzen Sie Ihre Escape-Variable auf True.

Answer 3

Sie jquery api verwenden kann man() dies das Element gesetzt nur einmal zum Beispiel laufen verwenden

$(window).one("scroll", function() { 

Sie finden mehr Dokumentation hier http://api.jquery.com/one/