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(){

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

示例小提琴：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()相同的结果，实际上也会返回延迟。什么是ajax结果？ success，error，complete ....你对它们有回调。 $.Deferred的实例也是如此。但是，您可以控制结果的解析，拒绝，等等。基于您的代码。如您所见，我已成功接收数据，并且我称其已成功解决dfd.resolve();。因此，您可以考虑.then()和.done()相当于成功，这两者都要求解决。区别在于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()会返回$.Deferred个实例，因此无需明确创建实例，因此实际上dfd并不需要您提供一个实例{/ p>

  $('#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

关于你的第二个问题：你不能把它全部解释给我，你呢？

解析defferred实例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中完成执行？

2 个答案: