How do I kill a function when i start another one?

Question

Hey guys I have the following code so when I click on another function I would like to stop the one is running.

So I am clicking on phone_icon and start phoneAnimation() then if I click on alarm_icon I want to stop phoneAnimating() function and start alarmAnimating()

Any idea how do I solve this as now is running the other one in behind?

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

Possible duplicate of [How to stop a function from running?](http://stackoverflow.com/questions/4851027/how-to-stop-a-function-from-running) — Durgpal Singh, Feb 22 '17 at 11:42

score 0 · Answer 1 · answered Feb 22 '17 at 11:41

0

You can use stop function to stop the currently running animation Here is the Documentation

answered Feb 22 '17 at 11:41

dEL

482
1
6
23

score 0 · Answer 2 · edited May 23 '17 at 10:29

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"/>

or If you are using animation then .stop is a method for stopping animations that is running asynchronously (in the background) on the current element. It doesn't interrupt/stop any other code that isn't using the effects library.

Instead you should take a look at .queue which lets you setup custom queues that you can clear or dequeue.

There already exist very good answers on how to use .queue so I'll point you to that question instead: Can somebody explain jQuery queue to me? - Look at the answer by gnarf.

yeah but from what I could see they use animate() – Markus Hayner Feb 22 '17 at 11:47 — Markus Hayner, Feb 22 '17 at 11:47

How do I kill a function when i start another one?

2 Answers2