jquery queue ajax,插件 jQuery ajaxQueue 中文API文档
插件 jQuery.ajaxQueue 中文API文档
源码 & 下载
适用场景
jQuery中ajax请求的简单队列。
插件特点
此pluging创建一个新方法，确保一次只运行一个AJAX请求。
它在使用jQuery的内置队列开始新的请求之前等待先前的请求完成。
jQuery.ajaxQueue(options)
采用与 jQuery.ajax 相同的选项，并返回一个promise。返回值不是a jqXHR ，
但它会表现得像一个。该 abort() 如果还没有开始对返回的对象方法从队列中删除请求，或一旦请求开始一起传递给jqXHR的中止方法。
基本用法
(function( $ ) {
/*
======== A Handy Little QUnit Reference ========
http://docs.jquery.com/QUnit
Test methods:
expect(numAssertions)
stop(increment)
start(decrement)
Test assertions:
ok(value, [message])
equal(actual, expected, [message])
notEqual(actual, expected, [message])
deepEqual(actual, expected, [message])
notDeepEqual(actual, expected, [message])
strictEqual(actual, expected, [message])
notStrictEqual(actual, expected, [message])
raises(block, [expected], [message])
*/
var requests;
module( "ajaxQueue", {
setup: function() {
requests = [];
this.xhr = sinon.useFakeXMLHttpRequest();
this.xhr.onCreate = function (xhr) {
xhr.customRespond = function() {
this.respond(200, { "Content-Type": "application/json" },
'{ "id": 10, "name": "ajaxQueue" }');
};
requests.push(xhr);
};
},
teardown: function() {
this.xhr.restore();
}
});
asyncTest( "Smoke detection: Normal ajax request", 1, function () {
$.ajax({
url: "mock.json",
dataType: "json",
success: function(data) {
start();
equal(data.name, "ajaxQueue");
}
});
requests[0].customRespond();
});
asyncTest( "Single ajaxQueue request", 1, function () {
$.ajaxQueue({
url: "mock.json",
dataType: "json",
success: function(data) {
start();
equal(data.name, "ajaxQueue");
}
});
requests[0].customRespond();
});
asyncTest( "Concurrent ajaxQueue requests", 9, function () {
$.ajaxQueue({
url: "first_mock.json",
dataType: "json",
success: function(data) {
console.log("\n1st mock received");
equal(data.name, "ajaxQueue");
}
});
$.ajaxQueue({
url: "second_mock.json",
dataType: "json",
success: function(data) {
console.log("2nd mock received");
equal(data.name, "ajaxQueue");
}
});
$.ajaxQueue({
url: "third_mock.json",
dataType: "json",
success: function(data) {
console.log("3rd mock received");
start();
equal(data.name, "ajaxQueue");
}
});
equal(requests.length, 1, "Only one request is called at a time");
equal(requests[0].url, "first_mock.json", "... and it's the 1st");
setTimeout(function() {
requests[0].customRespond();
equal(requests.length, 2, "Next request is called after 1st is received");
equal(requests[1].url, "second_mock.json", "... and it's the 2nd");
setTimeout(function() {
requests[1].customRespond();
equal(requests.length, 3, "Next request is called after 2nd is received");
equal(requests[2].url, "third_mock.json", "... and it's the 3rd");
requests[2].customRespond();
}, 500);
}, 500);
});
}(jQuery));
源码解析
参考引用