當我開始另一個功能時，如何殺死一個功能？

Question

嘿傢伙我有下面的代碼，所以當我點擊另一個功能，我想停止正在運行的一個。

所以我點擊phone_icon並開始phoneAnimation（），那麼如果我點擊alarm_icon我想停止phoneAnimating（）函數，並開始alarmAnimating（）

任何想法，我該如何解決這個問題的，現在運行其他人在後面？

$('#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

您可以使用停止功能來停止當前運行的動畫 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"/>

或者如果您使用的動畫則 .stop是停止動畫，是一種方法，在當前元素上異步運行（在後臺）。它不會中斷/停止任何其他未使用效果庫的代碼。

相反，您應該看看.queue，它允許您設置自定義隊列，您可以清除或退出隊列。

關於如何使用.queue已經存在很好的答案，所以我會指出你的問題，而不是：Can somebody explain jQuery queue to me? - 看看由gnarf的答案。