如何让调用函数等到被调用函数在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
}

然后在提交表单时，我将其称为以下函数

<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函数。我做错了什么？`

小提琴示例：http://jsfiddle.net/LKP66/18/

Answer 1

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

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

Answer 2

  $('#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() 相同的结果，实际上它也返回延迟。什么是ajax结果？ success, error, complete.... 你有他们的回调。与$.Deferred 的实例相同。但是，您可以控制结果是什么以及何时是解决、拒绝等。基于您的代码。如您所见，我已成功收到数据，我称它已成功解决dfd.resolve();。所以你可以认为.then() 和.done() 等同于成功，都需要解决。区别在于then()是dfd.promise().then()的方法而done()是dfd本身dfd.done()的方法

Ex.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;
  }

Ex.3

正如我提到的$.ajax() 返回$.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*/
      }
    });
  }