jquery: prevent resubmission of form until first one event is done - php

Question

I have a form that I am intercepting through Ajax / jQuery.
The problem here is in case some fields are not filled I show errors from textStatus into an error div.
My function then removes the div completely and reinserts a new empty one after removal of the original one (to have the div again for error showing).
What happens is that if I submit the form multiple times the new error div will be inserted multiple times in the dom, and the errors will be presented three times immediately in the original error div. I of course only need one error div and one set of errors to be shown.
My script is as follows:
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();
});
});
});
for example at initial stage I will have this situation in the page:
<div id="errors"></div>
If I press submit button 3 times in a row at the end, after showing the errors and removing the div I will get this situation in the page:
<div id="errors"></div>
<div id="errors"></div>
<div id="errors"></div>
What happens right before the insertion of those three elements is:
<div id="errors" style="display: none;">
I guess this is during the fadeOut(350) part of the script.
What I would like to achieve is if the button is pressed then wait for the script to finish and then be able to submit again.
I don't like the timeout option as I don't know exactly how much time the browser will take to display the errors and then removing and reinserting the error div. So how can I disabled subsequent submission until this part of the script has ended? ->
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

You can trace your script progression by declaring a variable right before your on('submit') function and use it to limit submissions:
jQuery(function ($) {
$(document).ready(function () {
var isEnded=true;
$("#AddModel").on("submit", function (e) {
if(isEnded){
isEnded=false;
.... YOUR CODE
}
});
});
});
When your specific portion of code is over, just add :
isEnded=true;