使用每个 Ajax 调用为进度条设置动画答案

【问题标题】：Animating a progress bar with each Ajax call使用每个 Ajax 调用为进度条设置动画
【发布时间】：2013-10-24 19:19:02
【问题描述】：

简而言之，我有一个 javascript 数组，其中包含一些 csv 文件要加载到 mysql 数据库中，并创建了一个脚本，该脚本使 ajax() 调用处理将文件上传到数据库的 php 页面。在客户端，有一个进度条随着每个文件加载到数据库中而移动。如果我使用'async: false'，一切正常，但浏览器被阻止，我不想要这个东西，但如果我使用'async: true'，一切都发生得很快，进度条跟不上同步加载的每个文件。任何人都可以构建代码以使 ptogressbar 与上传的每个文件保持同步吗？

<button id="loadfiles"class="btn"><span>Start Loading</span><span style="display: none">Stop Loading</span></button>

<script>
$(document).ready(function(){

    var strFiles = 'SC2RFFBCRMEPOSAPP20131022.csv|SC2RFFBDEALERSORO20131022.csv|SC2ROFUOR00_ESHOP20131026.csv|SC2ROFUOR00_ESHOP20131027.csv|SC2ROFUOR00_ESHOP20131028.csv|SC2RFSFCRMEPOSAPP20131022.csv|SC2RFSFDEALERSORO20131022.csv|SC2ROSFWEBSHOPAPP20131022.csv|SC2RFRPCRMEPOSAPP20131022.csv|SC2RFRPDEALERSORO20131022.csv|SC2RORPOR00_ESHOP20131022.csv|SC2RORPWEBSHOPAPP20131022.csv|Active_range_20131022.csv|Active_range_20131023.csv|Active_range_20131024.csv|SC2ROZBOR00_SLRM_20131019(1).csv|SC2ROZBOR00_SLRM_20131019.csv' ;
    var arrFiles = strFiles.split('|');
    var strFileType = {Full:5,Scope:3,Proposal:4,ActiveRange:3,ForceValue:2} ;
    var pragcycle = 0;
    var step = 0 ;
    var increment = 0;
    var i = 0

    $("#loadfiles").click(function(){
        for (key in strFileType) {  
            step = 100 / strFileType[key];
            pragcycle = pragcycle + strFileType[key];
            increment = 0;
            for (i;i<pragcycle;i++) {   
                var request = $.ajax({
                    url:'/quickadmin/php/admin/pages/AppLoadCSV.php',
                    async: false,
                    data: "basename=" + arrFiles[i],
                    success:function() {
                        increment = increment + step;
                        $("." + key).attr("style","width: " + increment + "%");
                    }
                })
            }
        }
    });
});
</script>

【问题讨论】：

标签： jquery ajax twitter-bootstrap progress-bar

【解决方案1】：

不确定我是否完全理解了您的问题。但只是为了加上我的两分钱，你检查过吗：

url:'/quickadmin/php/admin/AppLoadCSV.php',

         data: "basename=" + arrFiles[i] ,

         **beforeSend: function(){**

         $("#loading").show();

         },

         **complete: function(){**

         $("#loading").hide();

         },

         success:  function (data) {
         ...

【讨论】：

【解决方案2】：

您正在搜索的神奇词是递归。它允许您以指定的顺序发送 async-ajax，并且不会同时有 2 个 ajax 调用。除此之外，它是非阻塞的。

您只需要首先构建一个数组并将其提供给递归函数。

$(document).ready(function(){

    var strFiles = 'SC2RFFBCRMEPOSAPP20131022.csv|SC2RFFBDEALERSORO20131022.csv|SC2ROFUOR00_ESHOP20131026.csv|SC2ROFUOR00_ESHOP20131027.csv|SC2ROFUOR00_ESHOP20131028.csv|SC2RFSFCRMEPOSAPP20131022.csv|SC2RFSFDEALERSORO20131022.csv|SC2ROSFWEBSHOPAPP20131022.csv|SC2RFRPCRMEPOSAPP20131022.csv|SC2RFRPDEALERSORO20131022.csv|SC2RORPOR00_ESHOP20131022.csv|SC2RORPWEBSHOPAPP20131022.csv|Active_range_20131022.csv|Active_range_20131023.csv|Active_range_20131024.csv|SC2ROZBOR00_SLRM_20131019(1).csv|SC2ROZBOR00_SLRM_20131019.csv' ;
    var arrFiles = strFiles.split('|');
    var strFileType = {Full:5,Scope:3,Proposal:4,ActiveRange:3,ForceValue:2} ;
    var pragcycle = 0;
    var step = 0 ;
    var increment = 0;
    var i = 0

    $("#loadfiles").click(function(){
        var array=[]

        //Maybe set-up your progressbar here

        for (key in strFileType) {  
            step = 100 / strFileType[key];
            pragcycle = pragcycle + strFileType[key];
            increment = 0;
            for (i;i<pragcycle;i++) {   
                array.push(arrFiles[i]);
            }
        }
        recursivefunction(0,array);
});

function recursivefunction(index,array) {
    if((index!=array.length)&&(array.length!=0)) {
        $.ajax({
            url: "/quickadmin/php/admin/pages/AppLoadCSV.php",
            data: "basename=" + array[index],
            success: function (data) {
                //Updating your progressbar and stuff
                increment = increment + step;
                $("." + key).attr("style","width: " + increment + "%");
                recursivefunction(index+1,array);
            }
        });
    } else {
        //You are finished
    }
}

【讨论】：