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

RequestAnimationFrame 方法

ここでjsFiddle

(function (W) {
    W.onload = function () {
        var D = W.document,
            a = 0,
            c = D.getElementById('progress');

        function b() {
            c.innerText = a + 1;
            a++;
            if (a < 500) {
                requestAnimationFrame(b);
            } else {
                D.body.style.cursor = 'default';
            }
        }

        function start() {
            D.body.style.cursor = 'wait';
            b()
        }
        D.getElementById('gogogo').onclick = start;
    }
})(window)

この方法では、使用するリソースが少なくなるため、複雑なリンクの変更によって他の開いている Web サイトの速度が低下することはありません。

Answer 2

スタイルは、コール スタックが終了した後にのみ適用されます。次のように setInterval から関数の後半を実行することで、これを 2 つの異なるコール スタックに分けることができます。

var progress = document.getElementById('progress');

document.getElementById('gogogo').onclick = (function(){
    document.body.style.cursor = 'wait';

    setTimeout(function(){

        for(var ii = 0; ii < 30000; ii += 1){
            progress.textContent = ii;
        }

        document.body.style.cursor = 'default';
    }, 0);

});