在回调辅助结束时触发jQuery函数？

我显然不能正确理解jQuery异步执行。我有以下问题。我有一个函数，可以更改选择列表，如下所示：

function loadGroups() {

$.getJSON("/Process/ShowGroups", null, function (data) {
    var selectList = $("#groupsList");
    selectList.empty();
    $.each(data, function (index, optionData) {
        var option = $('<option>').text(optionData.Text).val(optionData.Value);
        selectList.append(option);
    });
});
$("#groupsList").trigger("liszt:updated");
}

这对我来说似乎是有意义的，但我被告知这是同一个回调的一部分，我需要将它移到回调函数的末尾。公平地说，我试过这个：

loadGroups();
$("#groupsList").trigger("liszt:updated");

---

这似乎应该奏效。loadGroups进行更改。调用函数后不应该进行回调吗？我错过了什么？如何确保在触发事件之前完成加载组？

您应该在getJSON回调中触发它。试试这个

function loadGroups() {

$.getJSON("/Process/ShowGroups", null, function (data) {
    var selectList = $("#groupsList");
    selectList.empty();
    $.each(data, function (index, optionData) {
        var option = $('<option>').text(optionData.Text).val(optionData.Value);
        selectList.append(option);
    });
    $("#groupsList").trigger("liszt:updated");
});

}

---

ajax仍在异步运行，这样做并不能解决问题。有几种解决方案：

您可以将触发器代码移动到回调本身中。这是可行的，但将ajax请求与触发器代码紧密耦合，这将在每次调用loadGroups时调用触发器

function loadGroups() {
   $.getJSON("/Process/ShowGroups", null, function (data) {
       var selectList = $("#groupsList");
       selectList.empty();
       $.each(data, function (index, optionData) {
           var option = $('<option>').text(optionData.Text).val(optionData.Value);
           selectList.append(option);
       });
       $("#groupsList").trigger("liszt:updated");
   });
}

一旦ajax请求完成，您就可以使用新的jQuery-deffered API执行您需要的任何操作

function loadGroups() {
   return $.getJSON("/Process/ShowGroups", null, function (data) {
       var selectList = $("#groupsList");
       selectList.empty();
       $.each(data, function (index, optionData) {
           var option = $('<option>').text(optionData.Text).val(optionData.Value);
           selectList.append(option);
       });

   });
}

---

您的代码将按照以下顺序执行：

$.getJSON/Process/ShowGroups。。。 对url的服务器调用。客户端不会等待服务器的响应。 $.getJSON之后的任何代码都将被导入loadGroups函数。 当服务器可能在步骤3之后发送响应时，您的回调函数将执行。因此，响应之后必须执行的任何代码都必须放入回调函数中，$.getJSON调用的第三个参数。

---

谢谢你的解释。帮了大忙

function loadGroups(callback) {
   $.getJSON("/Process/ShowGroups", null, function (data) {
       var selectList = $("#groupsList");
       selectList.empty();
       $.each(data, function (index, optionData) {
           var option = $('<option>').text(optionData.Text).val(optionData.Value);
           selectList.append(option);
       });
       if( typeof callback === 'function' )
           callback(); 
   });
}

  loadGroups( function(){ $("#groupsList").trigger("liszt:updated"); } );

function loadGroups() {
   return $.getJSON("/Process/ShowGroups", null, function (data) {
       var selectList = $("#groupsList");
       selectList.empty();
       $.each(data, function (index, optionData) {
           var option = $('<option>').text(optionData.Text).val(optionData.Value);
           selectList.append(option);
       });

   });
}

$.when( loadGroups() ).then(function(){ $("#groupsList").trigger("liszt:updated"); });