javascript - JQuery 元素显示/隐藏和控制流程

Question

我正致力于在长时间运行的函数中使用 JQuery 显示进度条。我的计划是在调用函数之前简单地显示包含进度条的div，然后在函数完成后隐藏div。以下代码示例演示了我正在尝试完成的任务。

$(document).ready(function() {
    $(document).click(function() {
        $("#progress").show();
        slowFunction();
        $("#progress").hide();
    });
});

function slowFunction() {
    for (var i = 0; i < 50000; ++i) {
        var t = Math.sin(i) + Math.cos(i);
        console.log(t);
    }
}

JSFiddle 上的示例 http://jsfiddle.net/MT25x/4/

问题是 div 根本没有显示，即使该函数在我的机器上运行需要大约 10 秒。

但是，如果我只是尝试在函数运行后显示 div，它会在点击发生后约 10 秒左右出现。谁能帮我阐明这个问题？

编辑:进一步的测试似乎表明，如果您一起删除 hide 调用，则 div 甚至在函数完成运行后才会显示。这似乎是非常奇怪的行为。

Answer 1

这是大多数浏览器的常见问题。当 cpu 密集型函数运行时，它会锁定主执行线程，并且浏览器在函数执行完成之前不会进行重绘，因此 div 被隐藏并显示得非常快，因为 show 和 hide 都在排队​​。要避免这种情况，您可以使用 setTimeout(...,0) 技巧，这会将函数排队等待立即执行。这不能保证跨浏览器工作，我只在 ie、chrome 和 firefox 上测试过。

$(document).ready(function() {
    $(document).click(function() {
        setTimeout(function(){$("#progress").show()},0); // queue this for immediate execution
        setTimeout(function(){slowFunction()}, 2000); // delay the script a little giving the browser time to repaint                           
    });
});

function slowFunction() {

    for (var i = 0; i < 500; ++i) {
        var t = Math.sin(i) + Math.cos(i);
    }
    $("#progress").hide();
}

Here's fiddle 。