jQuery - Объединение результатов неизвестного числа запросов Ajax

Question

Это может быть очень просто или довольно сложно. Я не уверен в этом.

Я пишу небольшое веб-приложение, которое будет делать расписание кино на основе Cineworld API.

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

Результирующий вызов API может выполняться только на одной пленке, поэтому я должен по очереди возвращать данные для каждой пленки.

Вы можете увидеть текущее, очень рано, состояние приложения здесь: http://www.lewishowles.co.uk/film/

И основные кишок находятся в этом файле: http://www.lewishowles.co.uk/film/js/lh.js

Линия 42 и 206 являются моими вопросами. 42 всегда регистрирует пустой массив, но если я каждый раз регистрирую массив на 206, все в порядке. Очевидно, что регистрация не поможет мне. Похоже, что журнал на 42 не ждет, пока весь код в функциях над ним закончен.

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

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

Настройка async на false заставила их отключиться друг от друга, но это не помогает в этой ситуации.

Две вещи, о которых я могу думать, используют Session Storage или скрывают результаты каждого цикла в HTML где-то, что мне потом нужно будет получить доступ позже, но оба они кажутся похожими на то, что они будут подвержены тем же проблемам.

Еще одна идея - нажать еще одну кнопку, чтобы данные имели время для загрузки, но это добавляет еще один шаг и не является идеальным.

Любые идеи?

Answer 1

Если вы хотите отключить несколько вызовов ajax, а затем знаете, когда они все закончили, существует несколько способов сделать это.

Проще всего просто держать счетчик количества вызовов ajax в полете. Затем, когда каждый заканчивается, вы уменьшаете счетчик (в обработчике успеха), и если счетчик достигает нуля, вы вызываете функцию, которую вы хотите выполнить, когда все данные доступны.

В псевдо-коде, он может работать, как это для asychronous вызовов Ajax:

function runAjaxRequests(listOfRequests) { 
    var ajaxCntr = listOfRequests.length; 
    var ajaxResults = []; 

    // fire off all the ajax requests 
    for (var i = 0; i < listOfRequests.length; i++) { 
     $.ajax(..., function(data) { 
      // ajax success handler 

      // store data returned from this request into ajaxResults 
      ajaxResults.push(...); 

      // see if all ajax requests are now done 
      --ajaxCntr; 
      if (ajaxCntr == 0) { 
       // all data has been returned, we can process it now 
       processAllAjaxData(ajaxResults); 
      } 
     }) 
    } 
} 

Answer 2

У меня был подобный случай использования. И я достиг этого, сделав async:false и добавляя каждый результат в родительскую переменную. Посмотрите ниже код.

  fileArr = ['1.csv', '2.csv'] 
      var csvObjArr = [] 
      for (var i in fileArr) { 
       $.ajax({ 
        type : "GET", 
        url : _default_base_dir + fileArr[i], 
        dataType : "text", 
        async: false, 
        success : function(data) { 
         // Appending every results in csvObjArr 
         csvObjArr = csvObjArr.concat($.csv.toObjects(data)); 
        } 
       }); 
      } 
      //At this point all ajax are completed 
      processData(csvObjArr) 

ВНИМАНИЕ Этот код будет сделать Ajax позвонить один за другим.Вы должны принять это во внимание, поскольку это может замедлить ненужные вещи. HTH