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

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

1 个答案: