如何停止第一个函数获取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();
        });
}