同時に2つのajax呼び出しを実行しますか？

Question

テキストファイルを更新する長いforeachループのあるajax呼び出しがあると同時に、そのファイルを読み込んで最初の呼び出しから変更されたコンテンツを別の2番目の呼び出しで表示したい場合、どのように達成できますか？

最初に実行されると、2番目の実行は、最初の実行が完了するまで待機します。

私は1番目と2番目を同時に実行したいと思います。 2回目の呼び出しでは、毎秒、最初の呼び出しで作成されたファイル内の状態を確認します。これはプログレスバーのようなものです。

function startTimer(){ 
    timer = window.setInterval(refreshProgress, 1000); 
} 

function refreshProgress(){ 
    $.ajax({      
     type: "POST", 
     url: '/index.php?/system/run_progress_checker', 
     dataType:"json", 
     success: function(data) 
     { 
      console.log(data); 
      if (data.percent == 100) { 
       window.clearInterval(timer); 
       timer = window.setInterval(completed, 1000); 
      } 
     }, 
     error: function(xhr, textStatus, error){ 
      console.log(xhr.statusText); 
      console.log(textStatus); 
      console.log(error); 
     }       
    });  
} 

function completed() { 
    //$("#message").html("Completed"); 
    window.clearInterval(timer); 
} 

$(".systemform").submit(function(e) { //run system 
    $.when(startTimer(),run_system()).then(function(){}); 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
}); 


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({      
     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']; 
        //alert(profitstr); 
        //alert(profit); 
        //options.data[0].name.push({event}); 
        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); 
      } 
     });   
} 

バックエンドの部分はそれほど重要ではありません。

Answer 1

jQueryの$ .when $ .thenのための素晴らしいケースのようです。最初の部分では$、最初のajax呼び出しがあり、終了したら...最初の部分から$ .then部分にデータを移植できます。たとえば、次のように

$.when(
     //perform first ajax call and pass this data to the 'then'. 
       $.ajax(
       { 
        type: "POST", 
        url: "<<insert url>>", 
        contentType: "application/json; charest=utf-8", 
        success: function (data) { 
         //process data 

        }, 
        error: function (XMLXHttpRequest, textStatus, errorThrown) { 

        } 
       }) 
      ).then(function (data, textStatus, jqXHR) { 


       var obj = $.parseJSON(data); // take data from above and use it to perform second ajax call. 
       var params = '{ "CustomerID": "' + obj[0].CustomerID + '" }'; 
       $.ajax(
       { 
        type: "POST", 
        url: "<<insert url>>", 
        data: params, 
        contentType: "application/json; charest=utf-8", 
        success: function (data) { 
         //process data 

        }, 
        error: function (XMLXHttpRequest, textStatus, errorThrown) { 

        } 
       }) 

      }); 

     } 
    });