Question

当执行更新用户界面的代码行之前，在使系统忙碌一段时间的代码块之前，UI不会更新。请参阅以下代码：

 <html>
   <body>
    <div id="acc">
       <input type="text" value="start" id="id1"/>
       <input type="text" value="e0" id="id2"/>
    </div>
    <script>
      myFunction();
      function myFunction() {  
         document.getElementById("id1").value="1";
         var j=true;
         for(var i=0;j==true;i++){
            document.getElementById("id2").value="e"+i;  
            if(i==999999)
             j=false;
         }
         document.getElementById("id1").value="2";
       }
    </script>
  </body>
</html>

值1永远不会分配给输入文本（id1）。就像JavaScript代码没有同步执行一样。

有人可以为此提供帮助吗？

Answer 1

值已更新，只是屏幕在JavaScript执行完成之前不会更新（JavaScript执行会锁定UI）。添加的console.log将打印您所期望的内容：

myFunction();

function myFunction() {
    console.log(document.getElementById("id1").value); // outputs "start" as expected
    document.getElementById("id1").value = "1";
    console.log(document.getElementById("id1").value); // outputs "1" as expected
    var j = true;
    for (var i = 0; j == true; i++) {
        document.getElementById("id2").value = "e" + i;
        if (i == 999999) j = false;
    }
    document.getElementById("id1").value = "2";
}

一种解决方案是将循环分成＆＃34;块＆＃34;。假设我们一次运行1000次迭代，然后使用setTimeout我们安排接下来的1000次迭代在1ms后运行。我们重复这个，直到我们完成整个集合：

myFunction();

function myFunction() {
    // iterator which we count up each loop
    var i = 0;

    // set to initial value
    document.getElementById("id1").value = "1";

    function processDone() {
        document.getElementById("id1").value = "2";
    }

    function processChunk() {
        var maxLoopsPerCall = 1000;
        while (maxLoopsPerCall-- > 0) {
            document.getElementById("id2").value = "e" + i;

            // if we're done, we call our done function and call return (so we don't schedule any more chunks
            if (i == 999999) {
                processDone();
                return;
            }

            i += 1;
        }

        // schedule to process next chunk of the loop
        setTimeout(processChunk, 1);
    }

    // schedule to process the first chunk of the loop
    setTimeout(processChunk, 1);
}

http://jsfiddle.net/8kddxqmd/

Answer 2

你需要让代码异步，就像这样;

＆＃13;

 <html>
   <body>
    <div id="acc">
       <input type="text" value="start" id="id1"/>
       <input type="text" value="e0" id="id2"/>
    </div>
    <script>
      myFunction();
      function myFunction() {  
         document.getElementById("id1").value="1";
         setTimeout(function(){
            for(var i=0;i<=999999;i++){
               document.getElementById("id2").value="e"+i;  
            }
            document.getElementById("id1").value="2";
          },5);
       }
    </script>
  </body>
</html>

＆＃13;

Answer 3

您可以尝试使用window.setInterval()

＆＃13;

var id1 = document.getElementById("id1");
var id2 = document.getElementById("id2");
id1.value = 1;
var i = 0;
var t = setInterval(function() {
  if (999999 < i) {
    clearInterval(t);
    id1.value = 2;
  }
  id2.value = 'e' + i;
  i++;
}, 6);

＆＃13;

<input type="text" value="start" id="id1" />
<input type="text" value="e0" id="id2" />

＆＃13;

JavaScript的。代码未执行。用户界面未更新

3 个答案: