Javascript 异步函数完成后执行函数_Javascript_Jquery_Asynchronous

Javascript 异步函数完成后执行函数

javascript jquery asynchronous

Javascript 异步函数完成后执行函数,javascript,jquery,asynchronous,Javascript,Jquery,Asynchronous,如何在anim或display\u effects功能完成后执行功能extra\u stuff？最好的选择是保留函数extra_stuff，直到animate完成，因为我不想编辑传递给方法上的的匿名函数，它应该保持简单易读 <html> <head> <meta charset="utf-8"> <script src="jquery-2.0.3.min.js"></script>

如何在

anim

或

display\u effects

功能完成后执行功能

extra\u stuff

？最好的选择是保留函数

extra_stuff

，直到

animate

完成，因为我不想编辑传递给方法上的

的匿名函数，它应该保持简单易读
<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>


.选定{颜色：粉红色；}






$（函数（）
{
函数取消标记_选定（）
{
$（'.selected'）.removeClass（'selected'）；
}
功能标记用户（e）
{
e、 addClass（“选定”）；
}
功能显示效果（e）
{
e、 制作动画（{fontSize:“24px”}，1500）；
}
函数额外_stuff（）
{
log（“可能是另一个动画”）；
}
$（'ul#workers li a'）。在（'click'，function（）上
{
取消选中的标记（）；
标记用户（$（此））；
显示_效果（$（此））；
额外的东西；
});
});
使显示\u效果
返回一个对象，然后在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);
    });
});

使display\u effects
返回一个对象，然后在promise的done
回调中调用extra\u stuff
方法
$(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);
    });
});

您需要回拨：
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动画完成时调用。检查一下。请注意，如果您只是想在fontsize之后添加另一个动画，它们将自动排队。
您需要回调：
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动画完成时调用。检查一下。请注意，如果您只是想在fontsize之后添加另一个动画，它们将自动排队。
您的extra_stuff（）
注释说“可能是另一个动画”-如果您确实想向同一元素添加其他动画，它们将自动排队。您的extra_stuff（）
注释说“也许是另一部动画“-如果您确实想向同一元素添加其他动画，它们将自动排队。谢谢，效果很好，但是如果我想添加另一个函数，在display\u effects
之后执行该怎么办。在这个解决方案中，函数extra_stuff
看起来像一些附加的、不重要的代码（作为参数传递）。我不想因为display\u effects
函数得到了异步代码而停止在这个匿名函数中添加其他指令/函数。我希望你能理解我：）谢谢，它工作得很好，但是如果我想添加另一个函数在display\u effects
之后执行呢。在这个解决方案中，函数extra_stuff
看起来像一些附加的、不重要的代码（作为参数传递）。我不想因为display\u effects
函数得到了异步代码而停止在这个匿名函数中添加其他指令/函数。我希望你能理解我：）