JQuery ajax xhr 100% завершено перед запуском?

Question

У меня есть длинный скрипт, который может занять несколько минут, поэтому я решил создать индикатор прогресса, который вернет текущее состояние.

Но у меня есть проблема, потому что XHR evt.loaded/evt.total (30/30) возвращает 1 (100%), прежде чем приступить к выполнению длинного скрипта ...

$(".systemform").live("submit",function(e) { //run system 
    run_system(); //start run system 
    e.preventDefault(); 
}); 

function run_system(){ 
    $("#leftcontainer").html(""); 
    $("#leftcontainer").show();   
    $("#chartContainer").hide(); 

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

    var sysid = $(".sysid:checked").val(); 
    var oddstype = $(".odds_pref").val(); 
    var bettypeodds = $(".bet_type_odds").val(); 
    var bookie = $(".bookie_pref").val(); 
    if (typeof oddstype === "undefined") { 
     var oddstype = $(".odds_pref_run").val(); 
     var bettypeodds = $(".bet_type_odds_run").val(); 
     var bookie = $(".bookie_pref_run").val();     
    } 

    $.ajax({     
     xhr: function() { 
      var xhr = new window.XMLHttpRequest(); 
      xhr.upload.addEventListener("progress", function (evt) { 
       if (evt.lengthComputable) { 
        var percentComplete = evt.loaded/evt.total; 
        console.log(percentComplete); 
        $('.progress').css({ 
         width: percentComplete * 100 + '%' 
        }); 
        if (percentComplete === 1) { 
         $('.progress').addClass('hide'); 
        } 
       } 
      }, false); 
      xhr.addEventListener("progress", function (evt) { 
       if (evt.lengthComputable) { 
        var percentComplete = evt.loaded/evt.total; 
        console.log(percentComplete); 
        $('.progress').css({ 
         width: percentComplete * 100 + '%' 
        }); 
       } 
      }, false); 
      return xhr; 
     }, 
     type: "POST", 
     url: '/index.php?/system/system_options/left/'+'1X2/'+oddstype+'/'+bettypeodds+'/'+bookie,   
     data: {    
      system : sysid, 
      showpublicbet : showpublicbet 
     }, // serializes the form's elements.  
     dataType:"json", 
     success: function(data) 
     {  
      console.log(data);          
      $("#systemlist").load('/index.php?/system/refresh_system/'+sysid,function(e){ 
       systemradiotocheck(); 
      }); 
      $("#resultcontainer").load('/index.php?/system/showresults/'+sysid+'/false');                    
      $("#resultcontainer").show(); 
      $("#leftcontainer").html(data.historic_table); 
      $("#rightcontainer").html(data.upcoming_table); 
      var count = 0; 
      var arr = []; 
      $("#rightrows > table > tbody > tr").each(function(){ 
       var row = $(this).data('row'); 
       if(typeof row !== 'undefined'){ 
        var rowarr = JSON.parse(JSON.stringify(row)); 
        arr[count] = rowarr;          
        $(this).find('td').each(function(){ 
         var cell = $(this).data('cell'); 
         if(typeof cell !== 'undefined'){ 
          var cellarr = JSON.parse(JSON.stringify(cell)); 
          arr[count][6] = cellarr[0]; 
         } 
        }); 
        count ++; 
       } 
      });       
      if(oddstype == "EU" && bookie == "Bet365"){ 
       $('.bet365').show(); 
       $('.pinnacle').hide(); 
       $('.ukodds').hide(); 
      } 

      if(oddstype == "EU" && bookie == "Pinnacle"){ 
       $('.pinnacle').show(); 
       $('.bet365').hide(); 
       $('.ukodds').hide(); 
      }   

      if(oddstype == "UK"){ 
       $('.bet365').hide(); 
       $('.pinnacle').hide(); 
       $('.ukodds').show(); 
      } 

      if(bookie == "Pinnacle"){ 
       $(".pref-uk").hide(); 
      }                  
      else{ 
       $(".pref-uk").show(); 
      }        
      $(".loading").hide(); 
      runned = true; 
      var options = { 
       animationEnabled: true, 
       toolTip:{ 
        content: "#{x} {b} {a} {c} {y}"  
       }, 
       axisX:{ 
        title: "Number of Games" 
       }, 
       axisY:{ 
        title: "Cumulative Profit" 
       }, 
       data: [ 
       { 
        name: [], 
        type: "splineArea", //change it to line, area, column, pie, etc 
        color: "rgba(54,158,173,.7)", 
        dataPoints: [] 
       } 
       ] 
      }; 
        //console.log(data); 
      var profitstr = 0; 
      var parsed = $.parseJSON(JSON.stringify(data.export_array.sort(custom_sort))); 
      var counter = 0; 
      for (var i in parsed) 
      { 
       profitstr = profitstr + parsed[i]['Profit']; 
       //console.log(profitstr); 
       var profit = parseFloat(profitstr.toString().replace(',','.')); 
       //console.log(profit); 
       var event = parsed[i]['Event'].toString(); 
       var hgoals = parsed[i]['Home Goals'].toString(); 
       var agoals = parsed[i]['Away Goals'].toString(); 
       var result = hgoals + ":" + agoals; 
       var date = parsed[i]['Date'].toString(); 
       var bettype = parsed[i]['Bet Type']; 
       var beton = parsed[i]['Bet On']; 
       var handicap = parsed[i]['Handicap']; 
       counter++; 
       options.data[0].dataPoints.push({x: counter,y: profit,a:event,b:date,c:result}); 
      } 

      $("#chartContainer").show(); 
      $("#chartContainer").CanvasJSChart(options); 

      $(".hidden_data").val(JSON.stringify(data.export_array)); 
      $(".exportsys").removeAttr("disabled"); 
      $(".exportsys").removeAttr("title"); 
     },   
     error: function(xhr, textStatus, error){ 
      console.log(xhr.statusText); 
      console.log(textStatus); 
      console.log(error); 
     } 
    }); 
} 

Что здесь проблема ?? ?

когда я console.log (EVT) я получаю это: от прогресса загрузки:

ProgressEvent {isTrusted: правда, lengthComputable: правда, нагруженный: 30, общая: 30, типа: «прогресс «...}

от загрузки прогресса:

система: 302 ProgressEvent {isTrusted: правда, lengthComputable: ложь, загружен: 28987, всего: 0, тип: "прогресс" ...} система: 302 ProgressEvent {isTrusted: правда, lengthComputable: ложь, нагруженный: 104950, всего: 0, типа: "прогресс" ...}

Похоже, загруженный слишком большой, что такое мое решение здесь ???

я это решаю непосредственно JQuery доступа к файлу вместо PHP с помощью $ .get:

function refreshProgress(){ 
    $.get('1_run.txt', function(data) { 
     console.log(data); 
    }); 
} 

Answer 1

Аякса функция XHR заменить для этого кода

xhr: function() 
       { 
        var xhr = new window.XMLHttpRequest(); 
        //Upload progress 
        $("#loadAdd").show(); 
        xhr.upload.addEventListener("progress", function (evt) { 
         if (evt.lengthComputable) { 
          var percentComplete = (evt.loaded/evt.total) * 100; 
          $('#loadAdd .progress-bar').css('width', percentComplete + '%'); 
         } 
        }, false); 
        //Download progress 
        xhr.addEventListener("progress", function (evt) { 
         if (evt.lengthComputable) { 
          var percentComplete = evt.loaded/evt.total; 
         } 
        }, false); 
        return xhr; 
       }, 

HTML код

<div class="col-lg-12"> 
    <div id="loadAdd" class="progress progress-striped active"> 
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 00%"> 
     </div> 
    </div> 
</div>