массива Заливки несколько запросов AJAX, а затем передать массив в другую функцию

Question

(Мое решение ниже)

У меня есть несколько HTML-элементов с классом .canvas-background которых информация хранится в базе данных. Я хочу получить информацию о каждом элементе и обработать его с помощью JavaScript. Но почему-то я не могу передать ответ запроса AJAX на другую функцию. Вот то, что я пробовал:

function initTabs() { 
    var tabs = loadTabInformation(); 
    console.log(tabs); // (1) 
    // do something else 
} 

function loadTabInformation() { 
    var requests = new Array(); 
    var tabs = new Object(); 
    var counter = 0; 
    $(".canvas-background").each(function() { 
     var tabNumber = $(this).data("tab-number"); 
     var request = $.ajax({ 
      type: 'POST', 
      url: '../db/GetTabInformation.ashx', 
      data: String(tabNumber), 
      dataType: 'json', 
      contentType: 'text/plain; charset-utf-8' 
     }) 
     .done(function (response) { 
      tabs[counter++] = response; 
     }).fail(function (jqXHR, textStatus, errorThrown) { 
      console.log("request error in loadTabInformation()"); 
      console.log(textStatus); 
      console.log(errorThrown); 
     }); 
     requests.push(request); 
    }); 
    $.when.apply($, requests).done(function() { 
     console.log(tabs); // (2) 
     return tabs; 
    }); 
} 

В (1) я undefined, но (2) все, кажется, будет хорошо.

РЕШЕНИЕ:

Благодаря ответ и ссылку в комментарии @Kim Хоанг условии, что я получил эту работу. Ключ, казалось, помещал функцию done() в вызывающую функцию, то есть initTabs() в моем случае. Другое дело, что я ошибся, это попытаться выполнить логику, которая должна быть выполнена после Запросы AJAX завершились за пределами выполненной функции обратного вызова. Они должны быть внутри (имеет смысл, если вы думаете об этом). И много выхода conosle помогло, чтобы увидеть, какая функция возвращает какой объект.

function initTabs() { 
    var tabInfoRequest = loadTabInfo(); 
    tabInfoRequest[0].done(function() { 
     var results = (tabInfoRequest[1].length > 1) ? $.map(arguments, function(a) { return a[0]; }) : [arguments[0]]; 
     for (var i = 0; i < results.length; i++) { 
      // do something with results[i] 
     } 
    }); 
} 

function loadTabInfo() { 
    var tabNumbers = new Array(); 
    $(".canvas-background").each(function() { 
     tabNumbers.push($(this).data("tab-number")); 
    }); 
    var requests = $.map(tabNumbers, function (current) { 
     return $.ajax({ 
      type: 'POST', 
      url: '../db/GetTabInformation.ashx', 
      data: String(current), 
      dataType: 'json', 
      contentType: 'text/plain; charset-utf-8' 
     }); 
    }); 
    var resultObject = new Object(); 
    resultObject[0] = $.when.apply($, requests); 
    resultObject[1] = requests; 
    return resultObject; 
} 

Примечание: Я только сделал resultObject -thing, потому что мне нужен массив requests в функции initTabs().

Спасибо, что помогли мне!

Answer 1

Вы ничего не возвращаете в loadTabInformation, так что, конечно же, вы получите undefined. Вы должны сделать это следующим образом:

function loadTabInformation() { 
    ... 
    return $.when.apply($, requests); 
} 

function initTabs() { 
    loadTabInformation().done(function (tabs) { 
     console.log(tabs); // (1) 
     // do something else 
    });  
}