35

我要做的是在执行 CPU 密集型脚本之前更新一个简单的 div 以说“正在处理...”（运行需要 3-12 秒，没有 AJAX）然后更新 div 以说“完成！ " 完成后。

我看到的是 div 永远不会用“处理中...”更新。如果我在该命令之后立即设置断点，那么 div 文本确实会更新，所以我知道语法是正确的。在 IE9、FF6、Chrome13 中的行为相同。

即使绕过 jQuery 并使用基本的原始 Javascript，我也看到了同样的问题。

你会认为这会有一个简单的答案。然而，由于 jQuery .html() 和 .text() 没有回调钩子，这不是一个选项。它也不是动画的，所以没有 .queue 可以操作。

您可以使用我在下面准备的示例代码自行测试，该示例代码显示了具有 5 秒高 CPU 功能的 jQuery 和 Javascript 实现。代码很容易理解。当您单击按钮或链接时，您永远不会看到“处理中...”

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
    start = new Date();
    end = addSecs(start,5);
    do {start = new Date();} while (end-start > 0);
    document.getElementById('msg').innerHTML = 'Finished JS';   
}
$(function() {
    $('button').click(function(){
        $('div').text('Processing JQ...');  
        start = new Date();
        end = addSecs(start,5);
        do {start = new Date();} while (end-start > 0);
        $('div').text('Finished JQ');   
    });
});
</script>
</head>
<body>
    <div id="msg">Not Started</div>
    <button>jQuery</button>
    <a href="#" onclick="doRun()">javascript</a>
</body>
</html>
4

4 回答 4

19

将其设置为处理，然后执行 setTimeout 以防止 CPU 密集型任务在 div 更新之前运行。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script>
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
    setTimeout(function(){
         start = new Date();
         end = addSecs(start,5);
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished Processing';   
    },10);
}
$(function() {
    $('button').click(doRun);
});    
</script>
    </head>
<body>
    <div id="msg">Not Started</div>
    <button>jQuery</button>
    <a href="#" onclick="doRun()">javascript</a>
</body>
</html>

您可以根据需要修改 setTimeout 延迟，对于较慢的机器/浏览器，它可能需要更大。

编辑：

您还可以使用警报或确认对话框来允许更新页面时间。

document.getElementById('msg').innerHTML = 'Processing JS...';
if ( confirm( "This task may take several seconds. Do you wish to continue?" ) ) {
     // run code here
}
于 2011-09-08T01:10:31.433 回答
3

您有一个运行 5 秒的循环，并在此期间冻结 Web 浏览器。由于网络浏览器被冻结，它无法进行任何渲染。您应该使用setTimeout()而不是循环，但我假设循环只是替代需要一段时间的 CPU 密集型功能？您可以使用 setTimeout 让浏览器有机会在执行您的函数之前进行渲染：

jQuery：

$(function() {
    $('button').click(function(){
        (function(cont){
            $('div').text('Processing JQ...');  
            start = new Date();
            end = addSecs(start,5);
            setTimeout(cont, 1);
        })(function(){
            do {start = new Date();} while (end-start > 0);
            $('div').text('Finished JQ');   
        })
    });
});

香草JS：

document.getElementsByTagName('a')[0].onclick = function(){
    doRun(function(){
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished JS';   
    });
    return false;
};

function doRun(cont){
    document.getElementById('msg').innerHTML = 'Processing JS...';
    start = new Date();
    end = addSecs(start,5);
    setTimeout(cont, 1);
}

您还应该记住始终使用 var 关键字声明所有变量，并避免将它们暴露在全局范围内。这是一个JSFiddle：

http://jsfiddle.net/Paulpro/ypQ6m/

于 2011-09-08T01:17:56.780 回答
2

我不得不等待 jQuery 操作 DOM，然后获取更改（将表单字段多次加载到表单中，然后提交）。DOM 增长了，插入的时间越来越长。我使用 ajax 保存了更改，以便用户能够从他离开的地方继续。

这没有按预期工作：

jQuery('.parentEl').prepend('<p>newContent</p>');
doSave(); // wrapping it into timeout was to short as well sometimes

由于像这样的 jQuery 函数.prepend()只有在完成后才会继续执行链，所以下面的方法似乎可以解决问题：

jQuery('.parentEl').prepend('<p>newContent</p>').queue(function() {
  doSave();
});
于 2019-01-21T14:13:51.090 回答
2

从 2019 年开始，人们使用double requesAnimationFrame来跳过一帧，而不是使用 setTimeout 创建竞争条件。

....
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
    requestAnimationFrame(() =>
    requestAnimationFrame(function(){
         start = new Date();
         end = addSecs(start,5);
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished Processing';   
    }))
}
...
于 2019-08-26T13:58:44.233 回答