由网友(Ψ×肆战作王)分享简介：Basicaly，我在执行一个AJAX请求外部登录系统，我怎么可以根据请求的长度更新进度条？Basicaly, I'm performing an AJAX request for an external login system, how can I update the progress bar based o...

Basicaly，我在执行一个AJAX请求外部登录系统，我怎么可以根据请求的长度更新进度条？

Basicaly, I'm performing an AJAX request for an external login system, how can I update the progress bar based on the length of the request?

例如，在 1.30s 请求花费的 1.40s 即可完成，我怎么可以更新基于一定的时间间隔一个进度条，像更新10％，每10ms的什么的，这里的进度条的HTML布局

For example, the request takes between 1.30s to 1.40s to complete, how can I update an progress bar based on certain intervals, like update it 10% every 10ms or something, here's the HTML layout for the progress bar

<div class="progress progress-striped active">
    <div class="progress-bar"  role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
        <span class="sr-only">65% Complete</span>
    </div>
</div>

进度条的长度是使用宽度决定：65％属性

这个想法是基本上得到它看起来像它的基础上，要求更新，使得当请求完成的百分比栏已满

The idea is to basically get it to look like it's updating based on the request so when the request is complete the percentage bar is full

推荐答案

我觉得这个职位很清楚 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

I think this post is quite clear http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

发布此以供将来参考（应该的博客被删除）：

Posting this for future reference (should the blog be removed):

$.ajax({
     xhr: function(){
       var xhr = new window.XMLHttpRequest();
       //Upload progress
       xhr.upload.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress
         console.log(percentComplete);
         }
       }, false);
     //Download progress
       xhr.addEventListener("progress", function(evt){
         if (evt.lengthComputable) {
           var percentComplete = evt.loaded / evt.total;
         //Do something with download progress
           console.log(percentComplete);
         }
       }, false);
       return xhr;
     },
     type: 'POST',
     url: "/",
     data: {},
     success: function(data){
    //Do something success-ish
    }
 });