JavaScript for 循环，innerHTML 在循环执行期间不更新

Question

我正在循环一个数组，并且在循环的每次迭代期间，我通过 ajax 调用一个 url。我还想更新 .innerHTML，以便它显示以让用户了解正在处理循环的哪个迭代。但是，.innerHTML 仅在脚本完成时显示更新。

如何在循环期间显示此通知？

我还使用查询 ajax 设置“async: false”。我不想让我的服务器同时处理所有 ajax 请求，因为它们正在编码 CPU 密集型的视频文件。我真的不想锁定浏览器以等待同步请求完成。

有更好的方法吗？

我的最终目标是为每组视频依次执行 merge.php 脚本，同时向用户显示当前状态指示器，同时不会在此过程中锁定浏览器。感谢您的帮助！

代码片段在这里：

// process the loop of videos to be combined
    var status = document.getElementById('currentStatus');
    for (i=0; i< count; i++) {

        // change the display

        var fields = videos[i].split(":", 2);

        current = i +1;

        currentStatus.innerHTML = "<b>Multi-part Videos:</b>&nbsp;&nbsp;&nbsp; <h3 class='status'>Currently Updating Bout #" + fields[1] + " (" + current + " of " + count + " videos)</h3>";



        // run the combine 
        var dataString = 'videoId='+ fields[0]; 



        $.ajax({  
            type: "POST",  
            url: "combine.php",  
            data: dataString,  
            success: function(txt) {


                //deselect the checkbox

                document.combine.video[selected[i]].checked = false;
            },
            async: false 
        }); 

Answer 1

async: false 将挂起整个浏览器，直到 ajax 请求完成。这就是为什么您在每次循环迭代时看不到页面更新的原因。

同步 ajax 请求通常会带来糟糕的用户体验（您是否喜欢页面莫名其妙地冻结？），而且几乎总有更好的方法来做到这一点。由于您使用的是 jQuery，延迟对象 API 使这一切变得简单。

Answer 2

正如其他人所提到的，你的问题是因为 JavaScript 是单线程的 - 当单个 JS 线程正在等待你的 ajax 请求返回时，它不允许更新 UI。

您可以通过将请求更改为异步并使用回调触发对下一个对象的请求来解决此问题：

// trigger the loop of videos to be combined
var status = document.getElementById('currentStatus');
processVideo( 0 );

function processVideo( index ) {
    var fields = videos[index].split(":", 2);

    currentStatus.innerHTML = "<b>Multi-part Videos:</b>    <h3 class='status'>Currently Updating Bout #" + fields[1] + " (" + current + " of " + count + " videos)</h3>";

    // run the combine 
    var dataString = 'videoId='+ fields[0]; 

    $.ajax({  
        type: "POST",  
        url: "combine.php",  
        data: dataString,  
        success: function() {
           processResponse( index);
        },
        async: true
    });
}

function processResponse( index ) {
   // this method is called each time the ajax request finishes
   if (index++ < count) {
      //deselect the checkbox
      document.combine.video[selected[index]].checked = false;

      processVideo( index );
   }
}

Answer 3

如果想在async设置为true的情况下一项一项更新，可以将下一次请求放在success回调函数中。更新状态代码也应该位于该函数内。

function ajaxRequest(i){

        // other processing
        .............

        $.ajax({  
            type: "POST",  
            url: "combine.php",  
            data: dataString,  
            success: function(txt) {

                //deselect the checkbox
                document.combine.video[selected[i]].checked = false;

                // update status
                currentStatus.innerHTML = .....
                // make next request
                if(i<lastOne){
                     ajaxRequest(i+1);
                }
            },
            async: true
        }); 
}