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的答案。

当我开始另一个功能时如何杀死一个功能？

2 个答案: