ajax 防止重复调用,如果防止或避免Ajax 的重复提交？

下面是我Ajax的Post提交的代码：

function AddData() {

var a={},submitFlag=true;

a.qid=1;

$("#click_me").off("click").val("正在提交...").prop("disabled", true);

var startDate = new Date();

$.ajax({

timeout: 30000,//超时时间30s

type: "post",

data: a,

url: "/Home/AddData",

dataType: "Text",

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

beforeSend: function () {

if (!submitFlag) {

alert("正在提交，请稍后！");

return;

}

submitFlag = false;

},

success: function (data) {

if (data.indexOf("添加失败") !== -1) {

$("#click_me").val("添加").prop("disabled", false).on("click", function () {AddData() });

} else {

$("#append_data");

$("#click_me").val("添加").prop("disabled", false).on("click", function () {AddData() });

}

},

complete: function () {

submitFlag = true;

},

error: function (xhr, textStatus) {

if (textStatus === "timeout") {

console.log("Timeout");

} else {

}

$("#click_me").val("添加").prop("disabled", false).on("click", function () { AddData()});

}

});

};

我前端层面使用了点击后 Disable 按钮 以及 beforeSend 和 complete 来防止重复提交，后段里面我也判断了如果已有这个数据，则禁止提交。然后，有时候，在偶然情况下，我还是能够提交相同的两条数据。

请问这样要如何解决？以及在哪种情况下会出现这种情况？

我在本地使用 Task.Sleep(5000) 来模拟点击按钮后，再刷新页面，然而本地是正常的，第二个数据已经无法提交了。