Wie kann ich eine Funktion beenden, wenn ich eine andere starte?

Question

Hey Leute, ich habe den folgenden Code, also wenn ich auf eine andere Funktion klicke, möchte ich aufhören, die eine läuft.

ich Sie auf phone_icon So und starten phoneAnimation() dann, wenn ich auf alarm_icon Ich möchte phoneAnimating() -Funktion und starten alarmAnimating()

Jede Idee zu stoppen, wie löse ich das so läuft jetzt die andere in hinten?

$('#phone_icon').on('click', function(e){ 
    e.stopPropagation(); 
    clearInterval(alarmIsAnimating); 
    clearInterval(notificationIsAnimating); 
    clearInterval(fbIsAnimating); 
    var animation = document.getElementById('phone_sprite'); 
    var repeat = 0; 
    var phonetl = new TimelineMax(); 
     phonetl.to("#phone_L", 0.5, {x:-403, ease:Power4.easeInOut}) 
     .to("#f2_copy", 1, {opacity:0, ease:Power4.easeInOut}, "-=1") 
     .to("#initial_sprite", .8, {repeat:0, backgroundPosition:"0px -5760px", ease:SteppedEase.config(8)})   
     .to("#phone_icon", 0.5, {css:{background: "url(images/active_icon1.png)"}})  
     .to("#alarm_icon", 0.5, {css:{background: "url(images/alarm_icon.png)"}}, "-=0.5")  
     .to("#text_icon", 0.5, {css:{background: "url(images/text_icon.png)"}}, "-=0.5")  
     .to("#fb_icon", 0.5, {css:{background: "url(images/fb_icon.png)"}}, "-=0.5")  
     .to("#f2_copy1", 1, {opacity:1, ease:Power4.easeInOut}, "-=1") 
     .to(["#f2_copy3", "#f2_copy2", "#f2_copy4"], 1, {opacity:0, ease:Power4.easeInOut}, "-=1") 
     .to("#initial_sprite", 1, {opacity:0, ease:Power4.easeInOut}, "-=1") 
     .to("#phone_sprite", 1, {opacity:1, ease:Power4.easeInOut}, "-=1"); 
     phoneAnimating(); 
     function phoneAnimating() { 
      clearInterval(phoneIsAnimating); 
      // console.log('phone'); 
      var frameHeight = 720; 
      var frames = 9; 
      var frame = 0; 
      phoneIsAnimating = setInterval(function() { 
      var frameOffset = (++frame % frames) * -frameHeight; 
      animation.style.backgroundPosition = "0px " + frameOffset + "px"; 
       if(frame == 9){ 
        clearInterval(phoneIsAnimating); 
         repeat++ 
         TweenLite.delayedCall(1,phoneAnimating); 
        } 
       }, 100); 
     } 
    }); 
    $('#alarm_icon').on('click', function(e){ 
    e.stopPropagation(); 
    clearInterval(phoneIsAnimating); 
    clearInterval(notificationIsAnimating); 
    clearInterval(fbIsAnimating); 
    var animation = document.getElementById('alarm_sprite'); 
    var repeat = 0; 
    var alarmIsAnimating; 
    var alarmtl = new TimelineMax(); 
     alarmtl.to("#phone_L", 0.5, {x:-403, ease:Power4.easeInOut}) 
     .to("#f2_copy", 1, {opacity:0, ease:Power4.easeInOut}, "-=1")   
     .to("#initial_sprite", .8, {repeat:0, backgroundPosition:"0px -5760px", ease:SteppedEase.config(8)}) 
     .to("#alarm_icon", 0.5, {css:{background: "url(images/active_icon2.png)"}}) 
     .to("#phone_icon", 0.5, {css:{background: "url(images/phone_icon.png)"}}, "-=0.5") 
     .to("#text_icon", 0.5, {css:{background: "url(images/text_icon.png)"}}, "-=0.5") 
     .to("#fb_icon", 0.5, {css:{background: "url(images/fb_icon.png)"}}, "-=0.5") 
     .to("#f2_copy2", 1, {opacity:1, ease:Power4.easeInOut}, "-=1") 
     .to(["#f2_copy3", "#f2_copy4", "#f2_copy1"], 1, {opacity:0, ease:Power4.easeInOut}, "-=1") 
     .to("#phone_sprite", 0, {opacity:0, ease:Power4.easeInOut}, "-=1") 
     .to("#alarm_sprite", 0, {opacity:1, ease:Power4.easeInOut}, "-=1") 
     alarmAnimating(); 
     function alarmAnimating() { 
      clearInterval(phoneIsAnimating); 
      // console.log('alarm'); 
      var frameHeight = 720; 
      var frames = 9; 
      var frame = 0; 
      alarmIsAnimating = setInterval(function() { 
      var frameOffset = (++frame % frames) * -frameHeight; 
      animation.style.backgroundPosition = "0px " + frameOffset + "px"; 
       if(frame == 9){ 
        clearInterval(alarmIsAnimating); 
         repeat++ 
         TweenLite.delayedCall(1,alarmAnimating); 
        } 
       }, 100); 
     } 
    }); 

Answer 1

Sie Stop-Funktion können Sie die aktuell laufenden Animation Here is the Documentation

Answer 2

input = document.getElementById("input"); 
 
function start() { 
 
    add = setInterval("input.value++",1000); 
 
}start();

<input type="number" id="input" /> 
 
<input type="button" onclick="clearInterval(add)" value="stop"/>

oder Wenn Sie Animation verwenden stoppen dann .stop ist eine Methode, Animationen zum Anhalten, das ist läuft asynchron (im Hintergrund) auf dem aktuellen Element. Es unterbricht/stoppt keinen anderen Code, der die Effektbibliothek nicht verwendet.

Stattdessen sollten Sie einen Blick auf .queue werfen, mit dem Sie benutzerdefinierte Warteschlangen einrichten können, die Sie löschen oder aus der Warteschlange entfernen können.

Es gibt bereits sehr gute Antworten darauf, wie man .queue verwendet, also werde ich Sie stattdessen auf diese Frage zeigen: Can somebody explain jQuery queue to me? - Schauen Sie sich die Antwort von gnarf.