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

JavaScript. code not executed. UI not updated

本文关键字：更新 用户界面 执行 JavaScript 代码      更新时间：2023-09-26
当在使

系统忙碌一段时间的代码块之前执行更新用户界面的代码行时，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 代码没有同步执行一样。

有人可以帮忙吗？

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

 <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>

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

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);
<input type="text" value="start" id="id1" />
<input type="text" value="e0" id="id2" />

值已更新，只是在 JavaScript 执行完成之前屏幕不会更新（JavaScript 执行锁定 UI）。添加的控制台.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";
}

一种解决方案是将循环拆分为"块"。假设我们一次运行 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/

相关文章：