Question

嗨朋友我在jQuery中有四个功能。我需要一个接一个地调用这个函数，即第二个函数只能在第一个函数完成后才能工作。我可以调用这个函数而不影响网站性能。

$.fn.loadcombo_Name
$.fn.loadcombo_Head
$.fn.loadcombo_Bank
$.fn.loadcombo_Remarks

任何帮助将不胜感激。

功能

 $.fn.loadcombo_Head = function () {
    var obj = {};
    obj.ParishName = $('#HF').val();
    obj.qtype = "Head";
    source = {
        datatype: "json",
        datafields: [
                            { name: 'HEID' },
                            { name: 'HeadName' }
                        ]
    };
    $.ajax({
        type: "POST",
        url: "../DataWebService.asmx/loadcombo",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            source.localdata = data.d;
            var dataAdapter_Head = new $.jqx.dataAdapter(source);
            $("#jqxDropDownList").jqxDropDownList({
                selectedIndex: 0,
                source: dataAdapter_Head,
                displayMember: "HeadName",
                valueMember: "HEID",
                width: 220,
                height: 30
            });          
        },
        error: function (error) {
            alert("Error");
        }
    });
}

Answer 1

你可以在完成第一个函数的ajax调用后调用其他函数，所以在.done()调用ajax body时调用它，如下所示 -

var loadcombo_Name = function(){
$.ajax({
url: "your url",
....
     })
     .done(function( data ) {
        $.fn.loadcombo_Head // call your function
     });
}

<强> jQuery API Information

编辑 - 您可以在success中调用您的下一个功能，如果您想调用ajax是否成功，请在error中调用它。

$.fn.loadcombo_Head = function () {
    var obj = {};
    obj.ParishName = $('#HF').val();
    obj.qtype = "Head";
    source = {
        datatype: "json",
        datafields: [
                            { name: 'HEID' },
                            { name: 'HeadName' }
                        ]
    };
    $.ajax({
        type: "POST",
        url: "../DataWebService.asmx/loadcombo",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            source.localdata = data.d;
            var dataAdapter_Head = new $.jqx.dataAdapter(source);
            $("#jqxDropDownList").jqxDropDownList({
                selectedIndex: 0,
                source: dataAdapter_Head,
                displayMember: "HeadName",
                valueMember: "HEID",
                width: 220,
                height: 30
            });
            //call function
            $.fn.loadcombo_Bank          
        },
        error: function (error) {
            alert("Error");
            // call function if want to call for failure case
            $.fn.loadcombo_Bank
        }
    });
}

但是在jQuery 1.5之后，success和error被弃用，我们正在使用.done()和.fail()。有关详细信息，请参阅文档。

Answer 2

尝试在函数

中return之前添加$.ajax()语句

var n = 0
, tasks = [
  $.fn.loadcombo_Name, $.fn.loadcombo_Head
  , $.fn.loadcombo_Bank, $.fn.loadcombo_Remarks
];

 (function task(p) {
  $.when(p[n]())
  .done(function() {
    if (n < p.length -1) {
      ++n;
      task(p)
    } else {
      console.log((n + 1) + " tasks completed")
    }
  })
}(tasks));

jsfiddle http://jsfiddle.net/guest271314/cpxyfhej/

如何在不影响网站性能的情况下一个接一个地调用jquery函数

2 个答案: