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

问题描述：

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

我使用需要被惊动后的名单已更新，以便它可以刷新内容的控制。我需要触发

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

现在，这似乎是有道理的我，但我被告知，这是同样的回调的一部分，我需要把它移动到回调函数的结束。公平的，然后我尝试了这个：

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

这似乎应该工作。 loadGroups（）进行更改。函数调用后不应该callback？我错过了什么？在触发事件之前，如何确保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"); 
}); 

}

不错。奇迹般有效。 – Rondel

@Rondel - Kool，尽可能将其标记为答案。 – ShankarSangoli

答

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

感谢您的解释。帮了很多 – Rondel

答

您的代码将下面这个命令被执行：

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

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

相关推荐