больше борьбы с асинхронным JavaScript

Question

Мое приложение стремится: 1. заполнить некоторые массивы (используя файл JSON) 2. обрабатывать данные массива до ... 3. ... вставка данных обработанного массива в подготовленные DIV

В настоящее время это структурировано процедурным способом, но, как указал Пойнти (/7412397/oblast-vidimosti-massiva-javascript-otlichaetsya-ot-ie9-do-firefox-chrome#7412398), пытается сделать это с помощью некоторого асинхронного программирования. Моя текущая цель - заставить его работать во всех браузерах, сделав его должным образом асинхронным.

Хотя приложение отлично работает в IE9, оно не работает в FF и Chrome. В следующей основной процедуре IE9 заполняет и сохраняет все содержимое массива. FF и др. Заселяет, а затем теряет его.

//globally declare some arrays (used throughout the application)
function buildTree(id) {
    $(document).ready(function() {
        $.getJSON(JSONfile, function(data) {
            $.each(data.person, function(i, xdata) {
                //populate arrays with relevant data
            }); //end of first $.each()
            //check 1
        }); //end of first getJSON
        //check 2
        $.getJSON(JSONfile, function(data) {
            //check 3
            $.each(data.person, function(i, xdata) {
                //populate arrays with relevant data, using arrays from first read
            }); //end of second $.each()
            //check 4
        }); //end of second getJSON
        //check 5
        //check 6
    }); //end of document.ready
}

Массивы в порядке: проверка 1, 3, 4, 6 Массивы пусты: проверка 2, 5

Чтобы добавить недоумение к моим страданиям, я решил просто сбросить массивы в DIV без обработки. Я случайно оставил предупреждение в (= check5). Хотя он по-прежнему показывает, что массивы пусты, при выполнении следующих строк (сброс массивов в DIV) все в порядке. Закомментируйте предупреждение: больше ничего.

Видите что-нибудь явно не так?

Answer 1

У вас есть несколько вариантов.

1. Выполните второй вызов JSON Ajax в функции success первой.(«отметка 1»)
2. Используйте jQuery's .when / .then , чтобы сложить их.
3. Делайте больше работы на стороне сервера и избегайте всего этого Ajaxy.
4. Сделать их синхронными (э-э, не надо).

Answer 2

Это был обманчивый вопрос. Да, у него действительно есть асинхронная ситуация (которая нуждается в исправлении), но реальный вопрос был: почему я не вижу ничего в заявлениях FF о предупреждении? На данный момент мне все равно, потому что даже если FireFox ничего не показывает в оповещениях, он просто отлично передает содержимое следующей подпрограмме, и именно здесь мы рассмотрим следующую проблему.

Answer 3

Проблема в вашем коде состоит в том, что оба AJAX-запроса отправляются немедленно, и ничто не гарантирует, что первый будет возвращен раньше второго.

Вы можете работать по этому вопросу

1. Отправка второго AJAX-запроса только после того, как первый будет выполнен

   $.getJSON(..., function(data1){
       $.getJSON(..., function(data2){
       });
   });
   

2. Явное получение разрешения на любой запрос в первую очередь

   //I don't know if there is a function to do this kind of sync
   // built-in jQuery already. In Dojo I'd use a DeferredList...
   
   var requests_to_go = 2;
   var args = [];
   
   function onHaveAllData(args){
       var data1 = args[0];
       var data2 = args[1];
       //populate second array
   }
   
   $.getJSON(..., function(data){
       requests_to_go -= 1;
       args[0] = data;
       if(request_to_go <= 0){ onHaveAllData(args); }
   });
   
   $.getJSON(..., function(data){
       requests_to_go -= 1;
       args[1] = data;
       if(request_to_go <= 0){ onHaveAllData(args); }
   });