Executing code when a function is complete

Question

I have a function in my code that animates several elements. What I'm wanting to do is execute a sequence of code but only after this function has completed.

Say for example I had this:

executeMyAnimationFunction();

// Execute this code AFTER executeMyAnimationFunction() has completed
alert('test');

So far I've tried using setTimeout but this doesn't seem to be very reliable. I've also tried using .promise() but this doesn't seem to execute properly either:

$(executeMyAnimationFunction()).promise().done(function () {
    alert('test');
});

However I admit I be using it incorrectly. In the demo on the jquery site, it seems promise() is being used on the elements that are being animated. I tried doing it like this:

$('#myAnimatedElement').promise().done(function () {
    alert('test');
});

and it seemed to work in certain scenarios but in others it didn't work. I wonder if this is a reliable way of using promise()?

Basically I'm stuck now with how I can do this. All I want to do is wait until a function has fully executed (the function simply animates a group of elements) and then continue with the execution of my code.

Is there a simple way of doing this using jquery/javascript that I'm missing?

Thanks

EDIT: To show my problem in a little more detail, here is the exact code I'm using:

<script>
        $(function () {

            $(window).bind('hashchange', function (e) {
                if ($(':animated').length) {
                    return false;
                }

                var section = $.param.fragment();
                var current = $('#content').children(':visible').attr('id');

                $('a').removeClass('active');                

                // If this is the first load of the page, then animate in the initial content
                if (section === '') {                    
                    if (current === 'reception') {
                        animateContentIn("reception");                        
                    }
                    else {                        
                        $('a[href="#' + section + '"]').addClass('active');

                        // Animate out existing content
                        animateContentOut(current);

                        setTimeout(function () {
                            animateContentIn("reception");
                        }, 1000);
                    }
                }
                else {
                    // Otherwise find the current page content and animate out
                    animateContentOut(current);

                    setTimeout(function () {
                        animateContentIn(section);
                    }, 1000);
                }               
            })

            // Since the event is only triggered when the hash changes, we need to trigger
            // the event now, to handle the hash the page may have loaded with.
            $(window).trigger('hashchange');
        });       

        function animateContentIn(activePage) { 
            // Now animate in the new content
            switch (activePage) {
                case "floorspace":
                    animateFloorspaceElementsIn();
                    break;
                case "reception":
                    animateReceptionElementsIn();
                    break;
            }
        }

        function animateContentOut(currentPage) {
            // Now animate in the new content
            switch (currentPage) {
                case "floorspace":                    
                    animateFloorspaceElementsOut();
                    break;
                case "reception":
                    animateReceptionElementsOut();
                    break;
            }
        }

        function animateReceptionElementsIn() {
            $('#reception').show();

            $('#reception .title').animate({
                bottom: 520
            }, 400);

            $('#reception .tile1').animate({
                bottom: 504
            }, 600);

            $('#reception .tile2').animate({
                bottom: 504
            }, 700);

            $('#reception .hero').animate({
                bottom: 40
            }, 1000);

            $('#reception .content1').animate({
                bottom: 8
            }, 400);

            $('#reception .content2').animate({
                bottom: 8
            }, 500);
        }

        function animateReceptionElementsOut() {
            $('#reception .title').animate({
                bottom: -56
            }, 400);

            $('#reception .tile1').animate({
                bottom: -136
            }, 600);

            $('#reception .tile2').animate({
                bottom: -152
            }, 700);

            $('#reception .hero').animate({
                bottom: -464
            }, 1000, function () {
                $('#reception').hide();
            });

            $('#reception .content1').animate({
                bottom: -112
            }, 400);

            $('#reception .content2').animate({
                bottom: -104
            }, 500);
        }

        function animateFloorspaceElementsIn() {
            $('#floorspace').show();

            $('#floorspace .title').animate({
                bottom: 520
            }, 400);

            $('#floorspace .tile1').animate({
                bottom: 504
            }, 600);

            $('#floorspace .tile2').animate({
                bottom: 504
            }, 700);

            $('#floorspace .hero').animate({
                bottom: 40
            }, 1000);

            $('#floorspace .content1').animate({
                bottom: 8
            }, 400);

            $('#floorspace .content2').animate({
                bottom: 8
            }, 500);
        }

        function animateFloorspaceElementsOut() {
            $('#floorspace .title').animate({
                bottom: -56
            }, 400);

            $('#floorspace .tile1').animate({
                bottom: -136
            }, 600);

            $('#floorspace .tile2').animate({
                bottom: -152
            }, 700);

            $('#floorspace .hero').animate({
                bottom: -464
            }, 1000, function () {
                $('#floorspace').hide();
            });

            $('#floorspace .content1').animate({
                bottom: -112
            }, 400);

            $('#floorspace .content2').animate({
                bottom: -104
            }, 500);
        }
    </script>
</head>
<body>
    <div id="vert-wrapper">
        <div id="wrapper">
            <aside id="sidebar">
                <nav id="navigation">
                    <ul>
                        <li><a href="#">Building</a></li>
                        <li><a href="#reception">Reception</a></li>
                        <li><a href="#floorspace">Floor Space</a></li>
                        <li><a href="#">Views</a></li>
                        <li><a href="#">Terraces</a></li>
                        <li><a href="#">Profile</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Specification</a></li>
                        <li><a href="#">Plans</a></li>
                        <li><a href="#">Location</a></li>
                        <li><a href="#">Ten Storeys</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </aside>  
            <div id="content">
                <article id="reception">
                    <h1 class="title">
                        <img src="/images/reception/title.png" alt="Edge" />
                    </h1>
                    <img src="/images/reception/1.jpg" alt="" class="tile1" />
                    <img src="/images/reception/2.jpg" alt="" class="tile2" />
                    <img src="/images/reception/hero.jpg" alt="" class="hero" />
                    <img src="/images/reception/content1.jpg" alt="" class="content1" />
                    <img src="/images/reception/content2.jpg" alt="" class="content2" />
                </article>
                <article id="floorspace">
                    <h1 class="title">
                        <img src="/images/floorspace/title.png" alt="Space" />
                    </h1>
                    <img src="/images/floorspace/1.jpg" alt="" class="tile1" />
                    <img src="/images/floorspace/2.jpg" alt="" class="tile2" />
                    <img src="/images/floorspace/hero.jpg" alt="" class="hero" />
                    <img src="/images/floorspace/content1.jpg" alt="" class="content1" />
                    <img src="/images/floorspace/content2.jpg" alt="" class="content2" />
                </article>
            </div>          
        </div>
    </div>
</body>

Now the code I have above does work, however I don't feel it's very clean nor does it seem to execute correctly 100% of the time.

Basically the dilemma I have is I want to be able to execute animateContentIn() after animateContentOut() has finished. The only way I've managed to do this is to delay the animateContentIn() function by the time it takes to do the longest animation - in this case it's 1000ms.

Isn't there a tidier, more efficient way of writing this??

most of the animation functions inside jQuery have a `complete` argument where you can pass a callback function to be called when the animation is complete. — Brian Rogers, Sep 05 '13 at 16:39

score 4 · Answer 1 · edited May 23 '17 at 11:50

function someRandomFunction(){
    // This will be executed after myFirstFunction
}

function myFirstFunction(callbackFunction){
    // Do some stuff
    alert(1);
    // Do something slow here

    // Callback when done:
    callbackFunction(some, input);
}
// Usage:
myFirstFunction( someRandomFunction ); // with existing function
myFirstFunction( function(){ alert(1);} ); // anonymous

Note: You can use anonymous functions
Small Demo: http://jsfiddle.net/zcp82/2/

Another topic with good info: Create a custom callback in JavaScript

score 2 · Answer 2 · answered Sep 05 '13 at 16:38

Use a callback?

function executeMyAnimationFunction(complete){
    $('div').animate({ height: '1px' }, 500, complete);
}

Call it like this:

executeMyAnimationFunction(function(){
    console.log('animation complete');
});

Or if you insist on using promises:

executeMyAnimationFunction(){
    var dfd = $.deferred();

    $('div').animate({ height: '1px' }, 500, function(){
        dfd.resolve();
    });

    return dfd.promise();
}

executeMyAnimationFunction().done(function(){
    console.log('animation complete');
});

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

Please refer Old Post

This seem like duplicate question, if you call multiple function it will call in sequence only

edited May 23 '17 at 12:23

Community

1
1

answered Sep 05 '13 at 17:30

MarmiK

5,639
6
40
49

Executing code when a function is complete

3 Answers3

Linked