如何停止第一個函數獲取json直到第二個函數getjson返回數據

Question

大家好，我在用Apache Cordova制作手風琴菜單（嵌套）時遇到問題。 我必須使用兩個getjson來獲取類別和子類別。 第一個函數的中間部分，我調用了第二個函數來獲取子類別，但是第二個函數沒有返回我最喜歡的包含htmlSubCategories的字符串，並且返回了未定義的值

     //Function 1
  var Categoriesdata = [];
function getCategories()
{
    var htmlCategories = "";
    $.getJSON('http://example.com/Categories', null, function (Categoriesdata) {
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            {
                htmlCategories += "<li>";
                htmlCategories += "<a href='#'> " + Categoriesdata[i].Text + "</a>";
                htmlCategories += getCategoriesRev(Categoriesdata[i].Id);
                htmlCategories += "</li>";
            }
       }
            $(".Categories").html(htmlCategories);  
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    var htmlSubCategories = "";
    $.getJSON('http://example.com/CategoriesRev', { id: Id }, function (CategoriesdataRev) {

        if (CategoriesdataRev.length > 0)
        { 
            for (var j = 0; j < CategoriesdataRev.length; j++) {
                htmlSubCategories += "<li>";
                htmlSubCategories += "<a href='#'> " + CategoriesdataRev[j].Text + "</a>";
                htmlSubCategories += getCategoriesRev(CategoriesdataRev[j].Id);
                htmlSubCategories += "</li>";
            }
            htmlSubCategories = "<ul class='submenu'>" + htmlSubCategories + "</ul>";

        }
  return htmlSubCategories;
    });

}

Answer 1

AJAX請求是異步的，這意味着第二個調用在返回時將不會完成，並且htmlSubCategories仍為空字符串。

在JavaScript中，您可以使用回調或Promises編寫異步代碼。 幸運的是，使用jQuery完成的AJAX請求會返回一個Promise，供您使用。

我也建議您不要對每個子類別都進行一次AJAX調用。 我只會調用一次以獲得全部，然后使用JavaScript進行過濾。

但是，使用您現有的工具，以下解決方案將使用簡單的jQuery：

//Function 1
function getCategories()
{
    $.getJSON('http://example.com/Categories', function (Categoriesdata) {
        var $categories = $('.Categories').html('');
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            $categories
                .append('<li>'
                          + '<a href="#">'
                              + Categoriesdata[i].Text
                          + '</a>'
                          + '<ul id="' + Categoriesdata[i].Id + '"></ul>'
                      + '</li>');

            getCategoriesRev(Categoriesdata[i].Id);
        }
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    $.getJSON('http://example.com/CategoriesRev', { id: Id },
        function(CategoriesdataRev) {
            var $subCategoryUl = $('.Categories').find('ul#' + Id);
            if (CategoriesdataRev.length > 0)
            { 
                for (var i = 0; i < CategoriesdataRev.length; i++)
                {
                    $subCategoryUl
                        .addClass('submenu')
                        .append('<li>'
                                  + '<a href="#"> '
                                      + CategoriesdataRev[i].Text
                                  + '</a>'
                              + '</li>');
                }
            }
            else
                $subCategoryUl.remove();
        });
}