Question

我尝试使用bootstrap的进度条显示通过XMLHttpRequest加载的文件的进度。不幸的是，进度条仅在文件加载时更新（即在文件加载时保持0％，然后在文件完成时跳转到100％）。我意识到这是因为UI和javascript是在同一个线程上运行但我不知道如何解决它。我尝试了许多替代方案，例如间隔和工人。

这是我的代码：

加载文件并运行progress eventListener：

        var xhr = createXHR();

        xhr.open('GET', path, true);

        xhr.addEventListener("progress", updateProgress);

        xhr.onreadystatechange = function(evt) {
        ...
        }

updateProgress功能：

var percentComplete = 0;
function updateProgress (oEvent) {
    if (oEvent.lengthComputable) {
        percentComplete = oEvent.loaded / oEvent.total;
        console.log(percentComplete);
    } else {
        // 
    }
}

此代码在文件开始加载时运行，尝试使用setInterval，因为它是异步的：

var progress = setInterval(function(){
    //update the progressbar
    $('#progress-bar').css('width', Math.round10(percentComplete*100, 2)+'%');

    if(percentComplete==1){
        $('#progress-modal').modal('toggle'); //Close the progress bar
        clearInterval(progress); //clear the setInterval
    }

}, 50)

我认为setInterval是异步会解决这个问题，但它并没有解决这个问题。 console.log方法运行良好 - 如果我可以更好地更新进度条。有人能指出我做错了吗？

Answer 1

无需在setInterval中包含进度条更新。将该代码直接移到updateProgress函数中。

var percentComplete = 0;
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    percentComplete = oEvent.loaded / oEvent.total;
    console.log(percentComplete);

    $('#progress-bar').css('width', Math.round10(percentComplete*100, 2)+'%');

    if(percentComplete==1){
      $('#progress-modal').modal('toggle'); //Close the progress bar
    }
  } else {
    // 
  }
}

Answer 2

我认为你的代码缺少一个变量，你应该随着标准的进展而更新。你可以在这里查看这段代码http://js.do/code/205468。用javascript写的，希望有所帮助。

Answer 3

搞定了。不幸的是，问题似乎在于宽度的计算（Math.round10（）函数）。代码现在是：

var percentComplete = 0;
function updateProgress (oEvent) {
    if (oEvent.lengthComputable) {
        percentComplete = 100* oEvent.loaded / oEvent.total;
    } else {
        //
    }
}

var i = setInterval(function(){
    $('#progress-bar').css('width', percentComplete+"%");

    if(percentComplete>=100) {
        $('#progress-modal').modal('toggle');
        clearInterval(i);
    }
}, 50);

抱歉 - 我期待这个问题可以围绕进度条和线程进行一些讨论，而不仅仅是一些奇怪的代码。对于未来的任何人来说 - setInterval似乎是动态更新进度条的方法。

javascript进度条即时更新

3 个答案: