javascript - jQuery:在所有计算和 DOM 更新完成后运行动画

Question

我试图阻止元素在特定功能完成之前进行动画处理。问题是动画在该功能仍在运行时开始，因此动画非常滞后和跳跃，而不是像我禁用该功能时那样平滑和平静。

我的代码看起来像这样:

function editElement() {
    // Do a lot of calculations and edit what is inside #box (no Ajax)
}

$("#click").click(function() {
    editElement();
    $("#element").slideDown("slow");
});

如何强制 slideDown 动画等到函数完成后再运行？

我已经尝试过其他问题中建议的callbacks和$.Deferred，但大多数似乎都是针对Ajax的，对我不起作用。感谢您的宝贵时间!

Answer 1

slideDown 总是在 editElement 执行完其代码后执行，因为 JavaScript 是一种“线性语言”。唯一的异常(exception)是当内部有异步函数时，包括 AJAX 和 setTimeout/setInterval。

不过，一个建议是您可以这样做:

function ediElement(..., callback){
    //codes here....
    //Make sure there is no asynchronous functions.

    callback();
}

$("#click").click(function() {
    editElement(function(){
        $("#element").slideDown("slow");
    });
});