如何使调用函数等到被调用函数在jquery中执行完毕? [英] How to make the calling function wait until the called function finishes execution in jquery?

问题描述

我有一个按钮，单击该按钮可打开一个模式(仪表板名称)，用户可在其中输入一些值.根据他在该模式上单击提交后的值，我调用另一个函数，该函数打开另一个模式，并且用户在此输入另一个值，最后，当他在此模式上单击提交时，我调用一个api来验证一切正确.

现在，问题是当我单击第一个按钮以打开模式时，执行不会等待函数从dashboard_name模态然后从graph_name模态获取数据.相反，它直接跳转到api函数调用，这就是jQuery的工作原理，这很对.但是我想知道如何使用deferred并保证将执行序列化.

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

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

解决方案

关于第二个问题: 你不了解我向你解释的所有内容，对吗?

解析延迟的实例dfd时，将调用

done()订阅回调.它几乎在您解决它的那一刻就被称为. 因此，您将在收到数据后打开下一个对话框.

只需花费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');
});

I have a button which when clicked opens a modal(dashboard_name) in which user enters some value. Based on the value after he clicks submit on that modal I call another function which opens another modal and user enters a different value there and finally when he clicks submit on this modal, I call an api to verify everything is correct.

Now, the problem is when I click on the first button to open the modal the execution doesn't wait for the function to get the data from the dashboard_name modal and then the graph_name modal. Instead it directly jumps to the api function call, which is right coz that's how jQuery works. But I wanted to know how to use deferred and promise to make this execution serial.

Function for the first button when clicked.

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

this function gets the dashboard modal and tries to get the value.

function dashboard_submit(){
  //do something
}

this function after success of the dashboard_submit function tries to get value for the graph modal

function graph_submit(){
  //do something
}

and then on form submit i call this following func

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

the function

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

I want all of this to be sequential which is not happening right now i.e. when i click on the first button it doesn`t wait for the functions to execute and directly the isdashboardcorrect() function gets called.

I want the order to be 1. button click 2. dashboard_submit() 3. graph_submit() 4. isdashboardcorrect() serially.

I tried something simpler like

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

When I click the button I call the dashboard_submit function. But here too it doesn`t wait for

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

this to execute in the above function and directly hits the api function. What Am i doing wrong?`

Example fiddle : http://jsfiddle.net/LKP66/18/

解决方案

About your second question: You don't get it att all what I've explain it to you, do you?

done() subscription callbacks are called when you resolve your defferred instance dfd. It is called almost the very moment you resolve it. So you are going to open your next dialog when you have recieved the data.

Just take 1-2 hours and try to understand the concept and what I've explained to you. That is very poor programming you are doing there.

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中执行完毕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！