jquery Ajax Queue 队列实现

最新推荐文章于 2022-03-11 14:38:41 发布

chicha9774

最新推荐文章于 2022-03-11 14:38:41 发布

阅读量250

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/913265/blog/892876

版权

有时候我们需要按顺序调用一组ajax，这些ajax需要有先后顺序，类似于同步的ajax，那么我们可以通过以下的方式来实现：

(这个Ajax用到jQuery.post)

//定义一个AJAX队列
$.newAjaxQueue = function() {
	var queue = [], posting = false, fn = function() {
		if (queue.length) {
			posting = true;
			var request = queue.shift();
			var url = request.url;
			var params = request.params;
			var callback = request.callback;
			if (typeof (params) === 'function') {
				callback = params;
				params = {};
			}
			$.post(url, params, function(response, status, xhr) {
				try {
					if (typeof (callback) === 'function') {
						callback(response);
					}
				} finally {
					fn();
					posting = false;
				}
			}, 'text');
		}
	}, instance = ({
		post : function(url, params, callback) {
			queue.push({
				url : url,
				params : params,
				callback : callback
			});
			if (posting === false) {
				fn();
			}
			return instance;
		}
	});
	return instance;
};

使用方法:

首先创建一个Ajax队列，然后为这个Ajax队列，添加需要执行的ajax操作(post操作)，这些Ajax会按顺序执行，一个执行完毕之后(获得返回值)，再继续执行下一个。

$.newAjaxQueue().post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] );

这个实现没有考虑到超时等情况，如果需要可以自己添加。

演示例子：

<html>
<body>
	<script type="text/javascript">
		//这个地方应该引用jQuery，此处只是个测试的例子，提供一个$.post方法。 
		var $ = {
			post : function(url, params, callback) {
				setTimeout(function() {
					callback('{}' + url);
				}, (Math.random() * 1000) >> 0);
			}
		}
		//打印输出的测试方法 
		var log = function(info) {
			var div = document.createElement('div');
			div.innerHTML = info;
			document.body.appendChild(div);
		}
		//定义一个AJAX队列 
		$.newAjaxQueue = function() {
			var queue = [], posting = false, fn = function() {
				if (queue.length) {
					posting = true;
					var request = queue.shift();
					var url = request.url;
					var params = request.params;
					var callback = request.callback;
					if (typeof (params) === 'function') {
						callback = params;
						params = {};
					}
					$.post(url, params, function(response, status, xhr) {
						try {
							if (typeof (callback) === 'function') {
								callback(response);
							}
						} finally {
							fn();
							posting = false;
						}
					}, 'text');
				}
			}, instance = ({
				post : function(url, params, callback) {
					queue.push({
						url : url,
						params : params,
						callback : callback
					});
					if (posting === false) {
						fn();
					}
					return instance;
				}
			});
			return instance;
		};
		//测试队列的执行 
		$.newAjaxQueue().post('url1', {
			a : 1
		}, function(response) {
			log('test:1');
		}).post('url2', {
			a : 1
		}, function(response) {
			log('test:2');
		}).post('url3', {
			a : 1
		}, function(response) {
			log('test:3');
		}).post('url4', {
			a : 1
		}, function(response) {
			log('test:4');
		}).post('url5', {
			a : 1
		}, function() {
			log('test:5');
		});
	</script>
</body>
</html>

转载于:https://my.oschina.net/u/913265/blog/892876

chicha9774

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery Ajax Queue 队列实现

有时候我们需要按顺序调用一组ajax，这些ajax需要有先后顺序，类似于同步的ajax，那么我们可以通过以下的方式来实现： (这个Ajax用到jQuery.post) //定义一个AJAX队列$.newAjaxQueue = function() { var queue = [], ...
复制链接

扫一扫