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

JQuery Element Display / Hiding and Control Flow

本文关键字：控制流 隐藏 元素 显示 JQuery      更新时间：2023-09-26

在一个长时间运行的函数中，我正在使用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/

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

然而，如果我只是尝试在函数之后显示div，它会很好地工作，在点击后大约10秒左右就会出现。有人能帮我澄清一下这个问题吗？

编辑：进一步的测试似乎表明，如果将隐藏调用全部删除，那么直到函数运行完毕，div才显示出来。这看起来很奇怪。

这是大多数浏览器的常见问题。当一个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();
}

这是一把小提琴。​

在click函数中隐藏进度条的代码，并在slowfunction（）结束时调用它

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

相关文章：