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); 
      }); 
     }); 


    }