前兩天碰到JS 調用 ajax, 這其中ajax的異步執行次序我們要注意,不小心可能會得到意外的結果。例:
//主函數:保存數據,其中調用子函數用于數據檢查
function SaveData() {
if ($("#DataForm").valid()) {
var overLapped = CheckIfPracticeOverLapped(); //注意這個子函數有 ajax.
//當其async:true時,可能本行未執行結束,
//而直接執行下一行 if (overLapped),
//此時 overLapped = undifined ,為 false
if (overLapped) {
alert("有訓練時間衝突");
}
else {
$("#DataForm").submit();
}
}
else {
alert("頁面數據檢查不通過");
}
}
//子函數,檢查要保存的數據是否有衝突
function CheckIfPracticeOverLapped() {
var overLapped = false;
$.ajax({
type: "POST",
url: '@Url.Action("CheckPraticeOverLapped", "SomeController")',
data: {
"casePersonJson": $("#hidCaseSelected").val(),
"programJson": $("#hidProgramSelected").val()
},
datatype: "html",
async: true,//注意這個屬性
success: function (data) {
if (data.overLapped) { //有訓練時間衝突
overLapped = true;
$.each(data.overLappedRec, function (index, item) {
alert(“訓練時間衝突:” +item); // 執行次序 2
});
}
else { //沒有訓練時間衝突
//alert("沒有衝突");
}
},
error: function (xhr, status, error) {
}
});
alert("ajax:" + overLapped);// 執行次序為 1 , 并返回 overlapped = false
return overLapped;
}
注意:ajax async:true 與 async: false 區別
async:true 默認為true.
表示異步執行本次 ajax,程序可能會未等 待本ajax函數執行完成,而執行后繼的代碼. 在上面的子函數中,底部代碼的 alert 會比 ajax里的 alert先執行. return overlapped = false.
async: false
則會按先后次序,先執行 ajax內,再執行底面的 alert. 以及 return