javascript progressbar动态更新

我试图使用引导程序的进度条显示通过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方法工作得很好-如果我可以类似地更新progressbar，那将是完美的。有人能指出我做错了什么吗？

无需在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 {
    // 
  }
}

---

我认为您的代码缺少一个变量，您应该随着条形图的进展进行更新。

---

您可以在这里查看此代码。它是用javascript编写的，希望对您有所帮助。

让它正常工作。不幸的是，问题似乎出现在宽度的计算中（Math.round10（）函数）。代码现在是：

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

---

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

对不起，我肯定不清楚问题出在哪里。在加载100%完成之前，progressbar不会更新，而不会在加载时更新（例如5%…12%…23%…等等）。这是因为在同一线程上运行的javascript代码完成之前，UI不会更新。这就是setInterval代码试图解决的问题，因为我认为它应该在另一个线程上运行。我试过你的代码，还是一样的问题。很高兴看到你解决了，这只是一个数学错误。可能有助于进一步了解JavaScript的单线程特性如何影响（或不影响）异步代码的运行方式。美元（“#进度条”）.css（'width'）是您所指的等效变量。当文件被下载时，它的宽度被改变，因此它可以正常工作（即，它可以达到100%）。问题是宽度的更新不会在文件下载时发生，而只会在下载结束时发生（我认为这与我提到的线程有关）

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

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