Javascript onclick函数仅在异步请求后工作。？

我有一个表单，在表单中我有一个保存数据和重置表单的按钮。我在单击保存按钮后进行某些验证，其中也包括同步ajax请求

我的表格

  <form>
     ...
     ...
     ...
     ...
     <button id="click">Click</button>
  </form>

问题来了。当我单击我的按钮时，函数在ajax请求之后执行。因为它们是同步的，我不能使它们异步，函数将在ajax请求完成后执行。我希望函数首先执行，然后显示dom中的更改，然后是ajax请求。所以非常感谢您的帮助。

编辑 正如Jason P在评论中指出的那样，您应该找到一种使调用异步的方法。这可能比你想象的要简单，而且会让你省去一些头痛。此外，它还将解决您目前正在努力解决的问题

原始答案（现在集成到问题中，由OP编辑）
你可以这样做：

$(document).ready(function(){
  $("#click").on('click',function(){
      disableButton('click'); //call your function before the ajax requests
      // put your ajax requests here
   });
});

function disableButton(element_id){
    $("#"+element_id).addClass('k-disabled');
    $("#"+element_id).attr('disabled','disabled');
}

---

您可以删除HTML中的

onclick

标记

我不确定您是否需要调用document.ready上的*disableButton（element_id）*函数。但是，如果您的用例允许您不调用document.ready上的函数，那么您可以尝试以下方法

function disableButton(element_id) {

    $("#"+element_id).addClass('k-disabled');
    $("#"+element_id).attr('disabled','disabled');

    // make your synchronous AJAX call here..
}

为了使代码更可读/更清晰，可以将ajax调用封装在另一个函数中，并从disableButton函数调用该函数。只是一个想法

---

干杯。

您需要做的是推迟ajax请求，以便在ajax启动之前清除调用堆栈

您可以通过将

setTimeout

与

0

一起使用来执行此操作，如下所示：

$(document).ready(function(){
  $("#click").on('click',function(){
      disableButton('click');

      // this will allow for the call stack to clear, then your ajax function will be called
      setTimeout(function(){
        //Here i am having certain ajax requests with async:false
      }, 0)

   });
});

---

为什么不在调用ajax之前调用它呢。？我的意思是删除内联处理程序并将其添加到专用处理程序中。奇怪的单击事件会从jquery和javascript中触发？它不会工作，因为我已经尝试过了。由于ajax是异步的，所以一旦ajax请求完成，函数将执行，然后只有更改在dom中可见。我给出了这两个处理程序，因为内联处理程序将首先执行。但这没有帮助当同步请求锁定浏览器时，屏幕不会更新。你真的应该把你的代码改成异步的，而不是试图对抗它。因为我已经尝试过了，所以它不会起作用。因为ajax是异步的，一旦ajax请求完成，函数就会执行，然后只有更改才会在dom中可见。当函数进行网络调用时命名函数

disableButton

虚假信息。这不会使代码更具可读性，除非将其重命名为^^。（除此之外，这并不是OP问题的答案）我只是在函数中使用了name disableButton，因为它是问题的一部分。这不是我的建议。另外，更改javascript的执行顺序可以很好地解决这个问题。这在过去发生过。我不知道你为什么说这不是OP问题的答案。！

$(document).ready(function(){
  $("#click").on('click',function(){
      disableButton('click');

      // this will allow for the call stack to clear, then your ajax function will be called
      setTimeout(function(){
        //Here i am having certain ajax requests with async:false
      }, 0)

   });
});