Question

简而言之，我有一个带有一些csv文件的javascript数组要加载到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>

Answer 1

不确定我是否理解了你的问题。但只是加上我的两分钱，你检查一下：

URL： '/ quickadmin / PHP的/管理/ AppLoadCSV.php'，

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

         **beforeSend: function(){**

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

         },

         **complete: function(){**

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

         },

         success:  function (data) {
         ...

Answer 2

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

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

window.onload = function() { 
    var select = document.getElementById('SelectId');
    var handler = function() {
      if(select.value) {
            window.location.href = 'http://' + select.value;
      }
    };
    select.addEventListener('change', handler, false);
};

使用每个Ajax调用设置进度条的动画

2 个答案: