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秒左右出现。有人能帮我解释一下这个问题吗？

编辑：进一步的测试似乎表明，如果你一起删除隐藏调用，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小提琴。

Answer 2

使用代码隐藏点击功能中的进度条，并在slowfunction结束时调用它（）

编辑：您可能需要添加某种IF语句来确定何时调用.hide（） - 例如IF i == 50000

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

2 个答案: