Execute function after async function is done

Question

How to make function extra_stuff to be executed after anim or display_effects functions are done ? Best option would be to hold function extra_stuff until animate is done because i don't want to edit anonymous function passed to on method, it should stay simple and readable.

<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-2.0.3.min.js"></script>
        <style>
            .selected {color:pink;}
        </style>
    </head>
    <body>

        <ul id="workers">
            <li><a href="#">worker#1</a></li>
            <li><a href="#">worker#2</a></li>
            <li><a href="#">worker#3</a></li>
            <li><a href="#">worker#4</a></li>
        </ul>

        <script>

        $(function()
        {
            function unmark_selected()
            {
                $('.selected').removeClass('selected');
            }
            function mark_user(e)
            {
                e.addClass('selected');
            }

            function display_effects(e)
            {
                e.animate({ fontSize: "24px" }, 1500);
            }

            function extra_stuff()
            {
                console.log('maybe another animation');
            }

            $('ul#workers li a').on('click', function()
            {
                unmark_selected();
                mark_user( $(this) );
                display_effects( $(this) );
                extra_stuff();
            });
        });

        </script>       
    </body>
</html>

Your extra_stuff() comment says "maybe another animation" - if in fact you do want to add additional animations to the same element they will automatically be queued. — nnnnnn
– nnnnnn, Commented Oct 4, 2013 at 9:54

Arun P Johny · Accepted Answer · 2013-10-04 09:54:29Z

2

Make display_effects to return a promise() object, and then call the extra_stuff method in the done callback of the promise

$(function () {
    function unmark_selected() {
        $('.selected').removeClass('selected');
    }

    function mark_user(e) {
        e.addClass('selected');
    }

    function display_effects(e) {
        return e.animate({
            fontSize: "24px"
        }, 1500).promise();
    }

    function extra_stuff() {
        console.log('maybe another animation');
    }

    $('ul#workers li a').on('click', function () {
        unmark_selected();
        mark_user($(this));
        display_effects($(this)).done(extra_stuff);
    });
});

answered Oct 4, 2013 at 9:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yield Over a year ago

Thanks, it works great but what if i want to add another functions to be executed after display_effects. In this solution function extra_stuff looks like some additional, not important code (passed as parameter). I don't want to stop adding another instructions/functions in this anonymous function just because display_effects function got async code. I hope you can understand me :)

Bergi · Accepted Answer · 2013-10-04 09:55:49Z

1

You need a callback:

function display_effects(e, callback) {
    e.animate({ fontSize: "24px" }, 1500, callback);
}

$('ul#workers li a').on('click', function() {
    unmark_selected();
    mark_user( $(this) );
    display_effects( $(this), extra_stuff ); // no invocation, pass reference!
});

It will be called in the future, when the fontsize animation is done. Check the docs for the .animate() method. Notice that if you simply want to add another animation after the fontsize, they will be queued automatically.

answered Oct 4, 2013 at 9:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Execute function after async function is done

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related