Question

我有一个长时间运行的方法 - 我想向用户表明正在进行操作。这是NOT和ajax调用，所以我不能使用我过去使用的常用模式来表示，例如一个微调器，在ajax事件之前，然后将其隐藏在成功例如。

在我的情况下 - 我没有进行ajax调用，而是做了一些非常繁重的DOM操作。

我在jsFiddle.net上有一个测试示例 - 很想学习如何捕获事件。目前，我的“等待消息”div在我的操作完成的同一时间更新，这太晚了：（

完整的示例代码位于：http://jsfiddle.net/rsturim/97hrs/6/

Javascript（jQuery）

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        var count = longRunningMethod(1000000000);

        $("#result").text(count);
        $("#wait-message").text("completed.");

    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

HTML：

<div id="wait-message">
    push button please 
</div>   
<hr />

<button id="link-action">Run Operation</button>

<hr />

<h1>Results:</h1>
<div id="result"> </div>

Answer 1

这是一个解决方案。我不确定它是否适用于所有浏览器，你可能想在几个浏览器中测试它，但我认为它确实如此：

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        // Stuff to do after a render
        setTimeout(function(){
            var count = longRunningMethod(1000000000);

            $("#result").text(count);
            $("#wait-message").text("completed.");
        }, 0);
    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

基本上，在脚本完成执行之前，浏览器不会呈现任何更改。这允许你做以下事情：

隐藏具有特定类别的所有div
显示其中一个div

在一行中，浏览器永远不会呈现显示为隐藏的div，因此您不会在页面上看到奇怪的闪烁或事物。

像我一样使用setTimeout，匿名点击处理程序将完成执行，浏览器将重新渲染，setTimeout中的匿名函数将运行（因为没有实际延迟，所以在渲染之后立即执行）。

Answer 2

使用setTimeout或setInterval代替while循环;像15ms这样的亚秒级延迟应足以防止窗口冻结/ UI锁定。

如何在长时间运行的事件中更新页面元素？

2 个答案: