当用户单击我的按钮时,我想执行简单的代码:
我写了这段代码:
HTML:
<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>
JS:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
for(var ii = 0; ii < 30000; ii += 1){
progress.textContent = ii;
}
document.body.style.cursor = 'default';
});
现场代码:http://jsfiddle.net/4Bz27/2/
而且出了点问题。循环首先执行,然后发生光标更改。
是否可能或与异步相关的任何方式?
最佳答案
您正在执行阻止操作。在某些时候,这肯定会导致脚本警告缓慢。您可以通过使循环异步来解决此问题:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
var index = 0,
updater;
updater = function() {
progress.textContent = index++;
if (index < 30000) {
setTimeout(updater, 50);
} else {
document.body.style.cursor = 'default';
}
};
updater();
});