javascript - 循环比休息更重要？

Question

我想在用户点击我的按钮时执行简单的代码:

1. 首先:将我的光标更改为“等待”
2. 下一步:执行循环
3. 循环结束时:将光标改回“默认”

我写了这段代码:

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/

有些地方不对劲。循环首先执行，然后发生光标更改。是否有可能或以任何方式与异步相关？

Answer 1

您正在执行阻塞操作。这肯定会在某些时候导致缓慢的脚本警告。您可以通过使循环异步来解决此问题:

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();
});