javascript - 如何确保在此 get 函数完全完成并呈现后运行其他函数？

Question

我有这个脚本，它通过 get json 函数添加带有数据的元素。

 $(document).ready(function() {
        ADD.Listitem.get();
        });

它基本上添加了一堆带有数据等的html标签。我遇到的问题如下：

 $(document).ready(function() {
    ADD.Listitem.get();

    var arr = [];
    $(".Listitem-section-item-title").each(function() {
        arr.push($(this.text()));
    });
 });

-

get: function(web) {
            AST.Utils.JSON.get("/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null, AST.Listitem.renderListitem);
        },
renderListitem: function(data) {
            $("#Listitem-template").tmpl(data["ListItemResults"]).prependTo(".ListItem-section-template");
    }

这是json获取：

ADD.Utils.JSON.get = function (url, data, onSuccess) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        async: true,
        url: url,
        data: data,
        cache: false,
        dataType: "json",
        success: onSuccess,
        error: ADD.Utils.JSON.error,
        converters: { "text json": ADD.Utils.JSON.deserialize }
    });
}

每个循环的数组都没有运行，因为 get 方法没有完成渲染Listitem-section-item-title选择器，所以它找不到选择器。

有什么好的解决方案吗？

Answer 1

您可以更改您的函数以返回由以下给出的承诺$.ajax：

ADD.Utils.JSON.get = function (url, data) {
    return $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        async: true,
        url: url,
        data: data,
        cache: false,
        dataType: "json",
        converters: { "text json": ADD.Utils.JSON.deserialize }
    }).fail(ADD.Utils.JSON.error);
}

get: function(web) {
    return AST.Utils.JSON.get("/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null).done(AST.Listitem.renderListitem);
},

这样你就可以做到

 $(document).ready(function() {
    ADD.Listitems.get().done(function(){
        var arr = [];
        $(".Listitem-section-item-title").each(function() {
            arr.push($(this.text()));
        });
    });
 });

Answer 2

打回来：

$(document).ready(function() {
 ADD.Listitem.get(url,data,function(){
   var arr = [];
   $(".Listitem-section-item-title").each(function() {
     arr.push($(this.text()));
   });
 });
});

没有回调：

如果您无法让 get 方法进行回调或返回承诺，那么我认为最好的方法是检查它何时完成。

$(document).ready(function() {

  ADD.Listitem.get();

  var timer = setInterval(function(){
    if ($("#thingWhichShouldExist").length>0){
      var arr = [];
      $(".Listitem-section-item-title").each(function() {
        arr.push($(this.text()));
      });
    clearInterval(timer);
    }
  },50);
});

Answer 3

检索值并在成功时调用将值推送到数组中的函数。

另外，arr.push($(this.text()));应该是arr.push($(this).text());。