如何让调用函数等到被调用函数在jquery执行完毕？

Question

我有一个按钮，单击它会打开一个模式 (dashboard_name)，用户可以在其中输入一些值。根据他在该模态上单击提交后的值，我调用另一个函数打开另一个模态，用户在那里输入不同的值，最后当他在该模态上单击提交时，我调用 api 来验证一切是否正确。

现在，问题是当我单击第一个按钮打开模式时，执行不会等待函数从 dashboard_name 模式获取数据，然后是 graph_name模态。相反，它直接跳转到 api 函数调用，这是正确的，因为这就是 jQuery 的工作方式。但是我想知道如何使用 deferred 和 promise 使这个执行串行化。

单击第一个按钮时的功能。

$('#add_to_dash').click(function(e){
  dashboard_submit();
  graph_submit();      
});

此函数获取仪表板模式并尝试获取值。

function dashboard_submit(){
  //do something
}

此函数在 dashboard_submit 函数成功后尝试获取图形模态的值

function graph_submit(){
  //do something
}

然后在表单提交上我将其称为 func

<form name="form2" onsubmit="return isDashboardCorrect(dashboard_name);" method="post" action="{{ url_for('dashboards_new') }}">

函数

function isDashboardCorrect(dashboard_name) {
  var flag=0;
  $.ajax({
    async: false,
    type: 'GET',
    url: 'xyz.com/dashboard/'+dashboard_name,
    success: function(data) {
      //alert(data);
      //do something
   });
}

我希望所有这些都是按顺序进行的，但现在还没有发生，即当我单击第一个按钮时，它不会等待函数执行，而是直接调用 isdashboardcorrect() 函数。

我希望顺序是 1.点击按钮 2. dashboard_submit() 3. graph_submit() 4.isdashboardcorrect() 连续。

我尝试了一些更简单的方法，比如

$('#add_to_dash').click(function(e){
  alert('addtodashstart');
  dashboard_submit().done(function(){
    alert('done');
  });


  alert('addtodashend');
});


function dashboard_submit()
{
  alert('dashboardsubmot');
  var dfd = new $.Deferred();
  $("#d_name_modal_div").modal({backdrop: false}).modal("show");
  $('#d_name_modal_submit').on('click', function(){
    dashboard_name=$('#dashboard_name').val();
    alert(dashboard_name);
    if(dashboard_name==null || dashboard_name.trim()=='')
    {
      alert('Dashboard name is mandatory.');
      return false;
    }
    else
    {
      dfd.resolve();
      return dfd.promise();
    }
  });
}

当我点击按钮时，我调用了 dashboard_submit 函数。但这里也不会等待

`$('#d_name_modal_submit').on('click', function(){

this在上面的函数中执行，直接命中api函数。我做错了什么？`

示例 fiddle：http://jsfiddle.net/LKP66/18/

Answer 1

  $('#add_to_dash').click(function(e) {

    $.when(dashboard_submit()).then(function(){
      graph_submit();
    });

  }); 

  function dashboard_submit() {
    var dfd = new $.Deferred();
    $.ajax({
      ....,
      ....,
      success: function (....) {
        dfd.resolve();
        /*some code...*/
      }
    });

    return dfd.promise();
  }

dfd 是一个对象，它可以有一些与 $.ajax() 相同的结果，实际上 returns 也被推迟了。 ajax 结果是什么？ success、error、complete... 并且您对它们有回调。 $.Deferred 的实例也是如此。但是，您可以控制解决、拒绝等结果的内容和时间。基于你的代码。如您所见，我已成功收到数据，我称其已成功解析 dfd.resolve();。所以你可以认为 .then() 和 .done() 等同于 success 都调用 resolve。区别在于then()是dfd.promise().then()的一个方法，而done()是dfd本身的一个方法dfd.done()

示例 2

  $('#add_to_dash').click(function(e) {

    dashboard_submit().done(function(){
      graph_submit();
    });

    /* That is 
     dfd.done(function(){
       graph_submit();
     });         
     since dashboard_submit() returns dfd
    */

  }); 

  function dashboard_submit() {
    var dfd = new $.Deferred();
    $.ajax({
      ....,
      ....,
      success: function (....) {
        dfd.resolve();
        /*some code...*/
      }
    });

    return dfd;
  }

示例 3

正如我提到的 $.ajax() returns $.Deferred 实例所以不需要显式创建一个所以实际上 dfd 不需要你已经由一个提供了：

  $('#add_to_dash').click(function(e) {

    dashboard_submit().done(function(){
      graph_submit();
    });

  }); 

  function dashboard_submit() {
    return $.ajax({
      ....,
      ....,
      success: function (....) {

        /* The dfd that ajax returns is resolved on success by jQuery so no explicit instance creation is needed nor resolving*/
      }
    });
  }

Answer 2

关于你的第二个问题：你不明白我向你解释的所有内容，是吗？

done() 订阅回调在您解析延迟实例时调用 dfd。它几乎在你解决它的那一刻被调用。因此，您将在收到数据后打开下一个对话框。

只需花 1-2 个小时，尝试理解这个概念以及我向您解释的内容。你在那里做的编程很糟糕。

http://jsfiddle.net/qoytmgcj/2/

function dashboard_submit() {
     alert('Dashboard submit');
    var dfd = new $.Deferred();
    dashboard_name = 'ram';
     $("#d_name_modal_div").modal({
        backdrop: false
    });

    dfd.done(function(){
        var dn = $('#dashboard_name');
        dn.val('booooooo I recived the data now I can open the dialog');
        dn.text(dn.val());
        $("#d_name_modal_div").modal("show");
    });
    dfd.resolve();
    return dfd;
}

function wtf() {
    var dfd = $.Deferred();
    $('#d_name_modal_submit').on('click', function () {
        dashboard_name = $('#dashboard_name').val();
        alert(dashboard_name);
        if ( !$.trim(dashboard_name) ) {
            alert('Dashboard name is mandatory.');
            return false;
        } else {
            dfd.resolve();
            alert('success');
            return dfd;
        }
    });
} 


$('#add_to_dash').click(function (e) {

    alert('Add to dash start');
    dashboard_submit().done(function () {
        wtf();
    });
    alert('Add to dash end');
});

如何让调用函数等到被调用函数在jquery执行完毕？

How to make the calling function wait until the called function finishes execution in jquery?

jquery

promise

jquery-deferred