jQuery一个接一个地运行一组函数

时间:2016-07-25 14:16:42

标签: jquery ajax callback promise jquery-callback

我有两组功能:

$(document).ready(function() {

    var id = $(this).attr('id');

    // First group of functions    
    getCountry(id);

    // Second group of functions  
    getResult(id, 'all');

});

在每个组中,函数是Ajax调用并链接在一起。这意味着首先运行getCountry()并在getRegion() Ajax属性上调用success,然后getRegion()getTown() Ajax属性上调用success,依此类推。这些函数用于填充表单下拉列表(选择)。然后,我将获得我所选择的国家所在地区的城镇。

在运行getResult()函数之前,我需要填写表单列表。

我不想在getResult()内拨打getCountry(),因为如果用户在加载页面后更改了所选选项,我也必须致电getResult()。在这种情况下,getResult()将采用'all'以外的各种参数。

我正在寻找一种简单的方法来重写我的$(document).ready(function()以便说:

  1. 首先:运行getCountry()及其依赖功能
  2. 然后运行getResult()及其依赖函数
  3. 我在jQuery doc中对回调和promise()感到有点迷失。我真的很感激能帮助我继续前进,因为我知道我会在以后认真回过去。

3 个答案:

答案 0 :(得分:1)

您可以尝试使用Deferred Object

// Create a deferred object
var deferred = $.Deferred();

定义要在延迟对象分辨率上调用的函数

// This function executes as soon as the deferred object gets resolved
deferred.done(function(value) {
   getResult(id, 'all');
});

在getCountry()组的最后一个函数的回调中,解析延迟对象:

// Resolve the deferred object
deferred.resolve(response);

选中此article

答案 1 :(得分:0)

尝试使用deferred,如下所示。

$(document).ready(function() {

    var id = $(this).attr('id');
    var deferred = $.Deferred();
    // First group of functions    
    getCountry(id);  //Inside getCountry method, make a call to deferred.resolve();

    // Second group of functions  
    //Now make call to getResult only when promise is resolved.
    deferred.done(function(result){
        getResult(id, 'all');
    });
});

答案 2 :(得分:0)

您可以使用jQuery中的Deffered。引用文档

  

jQuery 1.5中引入的Deferred对象是一个通过调用jQuery.Deferred()方法创建的可链接实用程序对象。它可以将多个回调注册到回调队列,调用回调队列,并中继任何同步或异步函数的成功或失败状态。

     

Deferred对象是可链接的,类似于jQuery对象可链接的方式,但它有自己的方法。创建Deferred对象后,您可以通过直接从对象创建链接或将对象保存在变量中并在该变量上调用一个或多个方法来使用以下任何方法

尝试下面的代码。

$(document).ready(function() {

var id = $(this).attr('id');
getCountry(id).done(getResult(id, 'all'));

});
function getCountry(id){
var dfd = $.Deferred(); 
// ur ajax calls and chains of onSuccessCalls
//call `resolve` on the deferred object, once you're done
Success:
    dfd.resolve();

// return the Deferred Object       
return dfd; 
}