依次執行異步操作Ajax,jQuery

有時遇到多個$.ajax請求同時發生，而這些請求中有依賴關係時，要求ajax請求依次順序執行

環境

jQuery 3.3.1

實現

/**
 * 提交運算函數到 document 的 fx 隊列
 */
var submit = function (fun) {
    var queue = $.queue(document, "fx", fun);
    if (queue[0] == 'inprogress') {
        return;
    }
    $.dequeue(document);
};

// 示例
submit(function(next){
	// ajax 請求一定要包含在一個函數中
	$.ajax('/apage').always(next);
});

var datas = [1,2,3,4,5,6,8,9,10];

$.each(datas, function(i, item){
	submit(function(next){
		// ajax 請求一定要包含在一個函數中
		$.ajax('/apage',{
			data:{
				value:item
			}
		}).always(next);
	});
});

注意事項

submit提交的函數不是立即執行的，函數體內寫的是將來要執行的動作。

而且因爲是異步的，所以需要在異步執行對象上註冊處理程序，否則後續的將無法自動執行。

Ajax 儘量使用always來處理，否則中間有異常發生時就不可控了。