У меня есть длинный скрипт, который может занять несколько минут, поэтому я решил создать индикатор прогресса, который вернет текущее состояние.
Но у меня проблема, потому что 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: true, lengthComputable: true, loaded: 30, всего: 30, type: "progress" …}
от загрузки:
system: 302 ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 28987, всего: 0, type: "progress" …} system: 302 ProgressEvent {isTrusted: true, lengthComputable: false, load: 104950, total: 0, type : "прогресс"…}
Похоже, что загруженный слишком большой, что здесь мое решение ???
Я разрешаю это напрямую JQuery доступ к файлу вместо php с помощью $ .get:
function refreshProgress(){ $.get('1_run.txt', function(data) { console.log(data); }); }