Question

我显然不能正确理解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");
}

我正在使用一个控件，需要在列表更新后发出警报，以便它可以刷新内容。我需要触发

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

现在这似乎对我有意义，但我被告知这是同一个回调的一部分，我需要将它移动到回调函数的末尾。很公平，我接着尝试了这个：

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

这似乎应该有效。 loadGroups（）执行更改。在调用函数后不应该callback完成吗？我错过了什么？如何确保在触发事件之前完成loadGroups？

Answer 1

您应该在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");
});

}

Answer 2

那么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");
   });
}

您可以将回调作为参数传递给函数。这可以更灵活，因为您可以调用其他函数而不仅仅是触发器代码。

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"); } );

您可以使用新的jQuery deffered API在ajax请求完成后执行您需要的任何操作。

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"); });

Answer 3

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

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

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

3 个答案: