Question

如何在extra_stuff或anim函数完成后执行函数display_effects？最好的选择是保持函数extra_stuff直到animate完成，因为我不想编辑传递给on方法的匿名函数，它应该保持简单和可读。

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

Answer 1

让display_effects返回promise()个对象，然后在承诺的extra_stuff回调中调用done方法

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

Answer 2

您需要回调：

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!
});

将来会在完成fontsize动画时调用它。检查docs for the .animate() method。请注意，如果您只想在fontsize之后添加另一个动画，它们将自动排队。

异步功能完成后执行功能

2 个答案: