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

Question

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

我的表单

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

JavaScript

$(document).ready(function(){
  $("#click").on('click',function(){
      disableButton('click');
      //Here i am having certain ajax requests with async:false
   });
});

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

问题来了。当我单击我的按钮时，该函数在 ajax 请求后执行。由于它们是同步的并且我不能使它们异步，该函数将在 ajax 请求完成后执行.我希望该函数首先执行并显示 dom 中的更改，然后显示 ajax 请求。非常感谢任何帮助。

Answer 1

您需要做的是推迟 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)

   });
});