我想要做的是在执行一个cpu密集型脚本(运行3-12秒,没有
AJAX)之前更新一个简单的div来说“处理…”,然后更新div来说“完成！ “完成后
我看到的是,div从来没有被更新为“Processing …”.如果我在该命令之后立即设置了一个断点,那么这个div文本会被更新,所以我知道语法是正确的. IE9,FF6,Chrome13相同的行为.
即使绕过jQuery并使用基本的原始Javascript,我也看到同样的问题.
你会认为这会有一个简单的答案.但是,由于jQuery .html()和.text()没有回调钩子,所以不是一个选项.它也没有动画,所以没有任何行动来操纵.
您可以使用我在下面准备的示例代码来测试这个,它显示了具有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>
解决方法
将其设置为处理,然后执行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
}
