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 是一种“线性语言”。唯一的例外是当内部有异步函数时，包括 AJAX 和setTimeout/ setInterval。

一个建议是你可以这样做：

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

    callback();
}

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