Ajax- beforeSend

Question

Во избежание получения ошибки дважды я использую beforeSend.

hasSent = false 

function submit() { 
    if (!hasSent) 
     $.ajax({ 
      url: "${createLink(controller:'userInvitation', action:'ajaxUpdate')}", 
      type: "POST", 
      data: $("#invitationForm").serialize(), 
      success: function(data, textStatus, jqXHR) { 
       $('#invitationForm')[0].reset(); 
       $('.thank-you-modal').modal('show'); 
       hasSent = true; 
       console.log(hasSent) 
      }, 

      complete: function() { 
       hasSent = false; 
       console.log(hasSent) 
      } 
     }); 
} 

Как вы можете видеть, что Аякс должен произойти, только если hasSent=false. По какой-то причине ajax происходит также, если пользователь нажимает несколько раз (очень быстро) на кнопку отправки

Answer 1

Для предотвращения такого рода вопроса отключить кнопку перед отправкой Аякса, а затем anable внутри функции успеха

$(mybutton).prop("disabled",true); 
// ajax call here 

затем

success: function(data, textStatus, jqXHR) { 
    $(mybutton).prop("disabled",false); 
    // code here 
} 

Answer 2

Вы можете создать еще один флаг, такую ​​как isSending

function submit() { 
    if(isSending) 
    return; 

    isSending = true 

    $.ajax({ 
     // ... 
     complete: function() { 
      isSending = false; 
     } 
    }); 
} 

Answer 3

есть два способа, которыми вы можете это сделать.

1) создать флаг и проверить, нажата ли кнопка. Если нажата, то не выполнить код Ajax

изменения флаг обратно после того, как запрос будет успешным, как этот

success:function(...) 
      { 
       flag=false; 
      } 

Или вы можете отключить кнопку на кнопку мыши, так что запрос будет осуществляться и ситуация с двойным щелчком не возникает. Включить кнопку на полный, как это

complete:function(..){ $("yourbutton").attr("disabled",false)}