功能未立即执行

Question

我有一个函数showLoading()，它通过附加一个类来显示一个微调器：

function showLoading(){
    //console.log("show loading");
    loading = true;
    $("body").addClass("loading");
}

我称之为：

Function heavyCrunch(){
    showLoading();

    <heavy crunching>

    hideLoading();
}

现在每当我在一些重负荷之前调用该功能时，需要＆gt; 1秒，它应该立即显示旋转器，但它不会。事实上，它根本没有表现出来。每当我点击一个触发heavyCrunch()功能的按钮时，它只会冻结一秒或2，然后立即显示结果。旋转器永远不会显示。为什么会这样？

我应该在.after回调中调用该函数吗？

Answer 1

在执行代码时，DOM不会刷新。它一直等到最后。

如果您希望更改可见，则必须推迟执行：

function heavyCrunch(){
    showLoading();
    setTimeout(function(){

        <heavy crunching>

        hideLoading();
    }, 0);
}

请注意，在某些繁重处理的情况下，您可能希望释放浏览器的压力并让它真正抽出时间。在这种情况下，您可以使用大于0的超时。

Answer 2

强制jQuery回答：

$.when(showLoading()).done(function () {
    heavyCrunch();
});

参考： https://api.jquery.com/jquery.when/

示例： jsFiddle