jquery：防止重新提交表單直到第一個事件完成

Question

我有一個表單，我通過Ajax/jQuery攔截。 這裏的問題是萬一一些字段沒有填寫我顯示從textStatus錯誤到錯誤div。 然後，我的函數完全刪除div，並在刪除原始文件後重新插入一個新的空格（爲了顯示錯誤再次顯示div）。 發生什麼事是，如果我多次提交表單，新的錯誤div將在dom中多次插入，並且錯誤將在原始錯誤div中立即呈現三次。我當然只需要顯示一個錯誤div和一組錯誤。 我的腳本如下：如果我按連續提交按鈕3次底，後

：

jQuery(function ($) { 
    $(document).ready(function() { 

     $("#AddModel").on("submit", function (e) { 

      var SubmitButton = $("#AddBtn"); 

      SubmitButton.blur(); 

      var form = $(this); 

      var postData = new FormData($("#AddModel")[0]); 

      var errors = $('#errors'); 

      var theForm = $('#theForm'); 

      var divAlert = "<div id=\"errors\">AAA<\/div>"; 

      $.ajax({ 
       type: 'POST', 
       url: form.prop('action'), 
       processData: false, 
       contentType: false, 
       data: postData, 
       success: function (data) { 

        console.log(data); 

       }, 

       error: function (textStatus) { 

        var json = JSON.parse(textStatus.responseText); 

        $.each(json, function (key, value) { 

         var errorVar = ""; 
         errorVar += "<div id=\"error\" class=\"col-lg-6 alert alert-danger\">"; 
         errorVar += "" + value + ""; 
         errorVar += "<a class=\"close\" data-dismiss=\"alert\">×<\/a>"; 
         errorVar += "<\/div>"; 

         errors.append(errorVar); 

        }); 

        if (errors.is(":visible")) { 

         errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function() { 

          errors.remove().promise().done(function() { 

           $(divAlert).insertAfter(theForm); 


          }) 

         }); 

        } 

       } 

      }); 
      e.preventDefault(); 
     }); 
    }); 
}); 

例如在初始階段，我也會有這種情況在頁面顯示錯誤和消除股利我會得到這個情況在頁面：

<div id="errors"></div> 
<div id="errors"></div> 
<div id="errors"></div> 

這三個要素的插入之前發生的權利是什麼：

<div id="errors" style="display: none;"> 

我想這是在腳本的fadeOut(350)部分。

我想達到的是如果按下按鈕然後等待腳本完成，然後能夠再次提交。 我不喜歡超時選項，因爲我不知道瀏覽器需要多長時間來顯示錯誤，然後刪除並重新插入錯誤div。那麼如何禁用後續提交，直到腳本的這部分結束？ - >

if (errors.is(":visible")) { 

         errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function() { 

          errors.remove().promise().done(function() { 

           $(divAlert).insertAfter(theForm); 


          }) 

         }); 

        } 

Answer 1

您可以通過在之前聲明一個變量權（「提交」）功能，並用它來限制提交跟蹤腳本的進展：

jQuery(function ($) { 
    $(document).ready(function() { 

    var isEnded=true; 
    $("#AddModel").on("submit", function (e) { 

     if(isEnded){ 
     isEnded=false; 
     .... YOUR CODE 
     } 

    }); 
    }); 
}); 

當你的代碼的特定部分過去，只需添加：

isEnded=true;