Использование queue() для загрузки нескольких файлов и назначения глобальных переменных

Question

Я не могу получить несколько файлов для загрузки данных и назначения на глобальные переменные. Я читал similar questions и related examples, но у меня все еще есть проблемы.

var origins = [], 
    geoJSON = { 
     "type": "FeatureCollection", 
     "features": [] 
    }; 

queue(1) 
    .defer(d3.csv, "path_to.csv", function(d) { 
     origins.push(d.o_geoid) 
     }) 
    .defer(d3.json, "path_to.json", function(d) { 
     // Limit GeoJSON features to those in CSV 
     for (var i = d.features.length - 1; i >= 0; i--) { 
     if($.inArray(d.features[i].properties['GEOID10'], origins) != -1) { 
      geoJSON.features.push(d.features[i]); 
     } 
     } 
    }) 
    .await(ready); 

function ready() { 
    console.log(geoJSON); 
} 

Я рад фильтровать функции GeoJSON в ready(), если это работает лучше, но мне нужно, чтобы это произошло, прежде чем начать создавать карту с

d3.g.selectAll("path") 
    .data(geoJSON.features) 
    .enter.append("path") 
... 

Я предполагаю, что это имеет отношение к делать с обратными вызовами и пустыми результатами, но я не могу заставить его работать. Я понял, что с помощью .await(console.log(geoJSON)); выводит правильный объект на консоль. Функция ready() не будет выполнена. Спасибо за любую помощь в понимании и устранении этой проблемы.

Answer 1

Ваш вопрос уже ответили Jason Davies' reply to the thread you linked, но в любом случае, здесь он вновь формулируются в терминах вашего точного примера ...

var origins = [], 
    geoJSON = { 
     "type": "FeatureCollection", 
     "features": [] 
    }; 

queue(1) 
    .defer(function(url, callback) { 
     d3.csv(url, function(error, csvData) { 
      if(!error) csvData.forEach(function(d) {origins.push(d.o_geoid)}); 
      callback(error, d); 
     }) 
    }, "path_to.csv") 
    .defer(function(url, callback) { 
     d3.json(url, function(error, jsonData) { 
      // Limit GeoJSON features to those in CSV 
      for(var i = jsonData.features.length - 1; !error && i >= 0; i--) { 
       if($.inArray(jsonData.features[i].properties['GEOID10'], origins) != -1) { 
        geoJSON.features.push(jsonData.features[i]); 
       } 
      } 
      callback(error, jsonData); 
     }) 
    }, "path_to.json") 
    .await(ready); 

function ready(error) { 
    console.log(error ? "error: " + error.responseText : geoJSON); 
} 

Я никогда не использовал очереди, но, если вы об этом думаете, это довольно очевидно из ответа Джейсона, как это работает.
Основная картина

queue() 
    .defer(asynchRequest1, url1) 
    .defer(asynchRequest2, url2) 
    .await(callback) 

function callback(error){ 
    console.log(error ? 
     "error: " + error.responseText : 
     "completed, " + (arguments.length - 1) + " objects retrieved" 
    ); 
} 

Сигнатура вызова для первого аргумента .defer является function(url, callback) и подпись обратного вызова function(error, result). Первый согласован с соглашениями d3 (для которых, очевидно, разработана очередь), а более поздняя - обычная практика асинхронного javascript (т. Е. Узла).
Чтобы сделать эту работу, под капотом очередь должна предоставить аргумент обратного вызова, и это должна быть функция, которая попадает в объект await, с результатом запроса asynch в качестве аргументов, используя стандартную подпись function(error, result).

Если вы используете прямой шаблон, где первый аргумент DEFER является d3.csv, например, затем, после ее завершения, d3.csv будет вызывать функцию обратного вызова, предоставленные очередями, поэтому соединения с await объектом, передавая это ошибка/результат состояние ,

В косвенной схеме, описанной Джейсоном Дэвисом, d3.csv завернут в другую функцию - с той же сигнатурой, которая отменяет вызов вызванного внутренним вызовом очереди до тех пор, пока не завершится d3.csv и ваша пост-обработка будет выполнена.

Теперь, когда мы понимаем, что происходит, мы можем подумать о рефакторинге, чтобы сделать его более чистым. Возможно, это так ...

... который имеет точно такой же эффект.