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

  • 首先:将光标更改为“wait”
  • 下一个:执行循环
  • 循环结束时:将光标更改回“默认”

  • 我写了这段代码:

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

    10-04 16:42
    查看更多