jQuery - 同步执行 2 个函数答案

【问题标题】：jQuery - Execute 2 functions synchronouslyjQuery - 同步执行 2 个函数
【发布时间】：2017-04-11 23:47:57
【问题描述】：

我为在我的应用程序上创建的每个表单创建了一个提交函数。它类似于下面写的。

$('form').submit(function(){
  //Some variable declaration
  $.ajax({
   type:'post',
   url:'someurl',
   data:formdata
   success:function(){
     console.log('form submitted');
   }
  });
});

毫无疑问，这很好用。现在对于其中一种形式，我想在收到响应后更新某个元素，类似于此。

$('#customform').submit();
console.log('custom form submitted');

所以在这种情况下，我希望仅在将“提交的表单”消息打印到控制台（同步加载）后才打印“提交的自定义表单”消息。有人帮忙吗？

【问题讨论】：

您的标题具有误导性。与您的代码没有任何同步
有$.ajax({async: false})的选项，但这会冻结你的浏览器，我建议你不要这样做，更好的方法是在第一个成功回调中进行第二个ajax调用
你试过了吗：stackoverflow.com/questions/17809056/…

标签： javascript jquery forms

【解决方案1】：

只需将代码包含在成功函数中即可：

success:function(){
  console.log('form submitted');
  console.log('custom form submitted');
}

你也可以添加完整的函数，这样无论错误还是成功，代码都会运行：

success:function(){
  console.log('form submitted');
},
complete: function() {
  console.log('custom form submitted');
}

正如@Tomalak 在评论中提到的，现代的做法：

var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
.done(function() {
  alert( "second success" );
})
.fail(function() {
  alert( "error" );
})
.always(function() {
  alert( "finished" );
});

可以在这里阅读更多内容：jQuery.post( ) .done( ) and success:

【讨论】：

现代的方法是使用.done() 和.always() 承诺回调。比较：stackoverflow.com/questions/22213495/…
@Tomalak - 同意，但是 OP 添加了带有成功功能的代码，如果他遵循指南或任何原因，其他方法可能会使他感到困惑。
@YanMayatskiy 谢谢，我确实想要你所说的“现代方式”。
@SanketR- 你应该感谢 Tomalak，因为他是建议添加它的人，但这两种方式几乎相同。

【解决方案2】：

表单完成提交后我会取消$("form").submit eventlistener，并在其成功函数中添加一个自定义

$("form").submit(function(){
    $.ajax({
        type:"post",
        url:"someurl",
        data:formdata,
        success:function(){
            console.log("form submitted");
            $("form").off("submit");

            $("#customform").submit(function(){
                $.ajax({
                    type:"post",
                    url:"someurl",
                    data:modifiedFormdata,
                    success:function(){
                        console.log("custom form submitted");
                    }
                });
            }); 
        }
    });
});

【讨论】：

OP 不想发送两个 Ajax 请求。