jQuery，multipe JSON文件，遞歸AJAX

Question

把我的頭髮拉出來。

jQuery的，多JSON文件&阿賈克斯

我有一個收集數據和傾倒JSON文件到一個文件夾在我的網絡服務器

我想可視化數據的Python腳本。

基本上我首先繪製一個SVG地圖並用一個虛擬json文件着色。隨後我想使用JSON數據對其進行着色。每個JSON文件都會代表一個完整的地圖渲染（着色）。

我正在使用Ajax調用PHP腳本來返回目錄中的文件。然後，我想使用Ajax（或簡寫.getJson）在該文件中添加數據 - 爲地圖上色，然後轉到下一個（最終結果是動畫）。問題在於AJAX的異步特性，並沒有對Ajax位的及時執行和完成的任何控制。顯然，我不想進行同步調用，因爲我不想鎖定瀏覽器。

這裏是我的代碼（道歉 - 它是相當沉重的）

jQuery(document).ready(function() { 

$(function() { 

    var map, c = []; 
    var dep_data; 
    var val = {}; 
    var max= 0; 
    var vals = new Array(); 

    c = $('#map'); 
    c.height(c.width()*.5); 

    drawMap('mapData.json'); 

    function drawMap(url){ 
     console.log(url); 
     $.ajax({ 
     url: 'mapData.json', 
     dataType: 'json', 
     success: function(data) { 

      dep_data = data; 

      map = window.m = $K.map('#map', 600, 800); 
      map.loadMap('ireland.svg', function() { 
       map.loadStyles('./mapping_files/style.css'); 
       map.addLayer({ 
        id: 'regions', 
        key: 'name-1' 
       }); 

       colourMap(dep_data); 

        var mapData = $.ajax({ 
         url: './php/getfiles.php', 
         type : 'POST', 
         dataType: 'json', 
         success: function (files){ 

          for (_a in files.response){ 
           for (_b in files.response[_a]){ 
             $.ajax({ 
             url: files.response[_a][_b], 
             dataType: 'json', 
             success: function (json){ 
              colourMap(json); 
              $(this).dequeue(); 
             } 
             }); 
           }  

          } 
         }, 

         error: function (files){ 
          console.log(files.message); 
         }, 

        }); 

       }); 

      } 
     }); 



    } 

    colourMap = function(data) { 

    //do the coloring in... 

} 

}); }); 

Answer 1

好吧，

你可能想從阿賈克斯成功解耦JSON處理代碼（）函數。相反，排序數據並將其存儲在全局變量中。一旦接收到所有數據（檢查它），就可以調用一個函數來繪製SVG，從而控制時序。它像jQuery

編輯的$ .document（準備好）：

根據你的情況，你需要一個更有效的排隊系統，爲您的JSON文件。一種方法是以塊的形式加載json文件，而不是隨機加載。你已經提到每10分鐘就會創建一個新文件，因此獲得第一個json文件並獲取35個更多的json文件，實際上可以獲得6個小時的數據。如果一個文件夾目前少於36個文件，您可以選擇等到所有36個文件都存在，然後運行svg代碼並繼續或等待下一個36個json文件。這可以控制時間，其中一個svg文件代表6小時的數據。你也可以從36更改爲任何合理的值

Answer 2

找到了一個很棒的解決方案here，我已經調整了一下，如下所示。完美的作品。感謝這一傢伙的投入。

 function getFiles(){ 

     $.ajax({ 
      url: './php/getfiles.php', 
      type : 'POST', 
      dataType: 'json', 
      success: function (files){ 

       for (_a in files.response){ 
        for (_b in files.response[_a]){ 
         var fname = files.response[_a][_b].substr(30, 8); 
         jsonVals[fname] = files.response[_a][_b]; 
        }  
       } 

       getData(); 

      }, 

      error: function (files){ 
       console.log(files.message); 
      }, 

     }); 

    } 


    function getData(){ 

     _d = 0; 

     function fireRequest(jsonURL) { 
       return $.ajax({ 
        type: "GET", 
        url: jsonURL, 
        dataType: 'json', 
        success: function(data){ 
         console.log("got " + jsonURL); 
         if (_d == Object.size(jsonVals)){ console.log('done'); } 


        } 
       }); 
     } 

     var countries=["US","CA","MX"], startingpoint=$.Deferred(); 
     startingpoint.resolve(); 

     $.each(jsonVals,function(key, file) { 
      startingpoint=startingpoint.pipe(function() { 
        console.log("making requst for " + file); 
        _d = _d + 1; 
        return fireRequest(file); 
      }); 
     }); 


    }