近来碰到需要做ajax耽误的需求,上一段代码记录下:
var XHRService = function(options) {
this.options = options;
this.reqTimer = null;
};
XHRService.prototype = {
constructor: XHRService,
req: function(options) {
var that = this,
defer = $.Deferred();
clearTimeout(this.reqTimer);
this.reqTimer = setTimeout(function() {
that._req(options, defer);
}, this.options.reqDelay);
return defer.promise();
},
_req: function(options, defer) {
var that = this;
if (this.xhr) {
this.xhr.abort();
}
if (typeof this.options.before === 'function') {
clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(function() {
that.options.before();
}, this.options.loadingDelay);
}
this.xhr = $.ajax(options).done(function(data) {
defer.resolve(data);
})
.always(function(res, status, xhrObj) {
clearTimeout(that.loadingTimer);
if (typeof that.options.after === 'function') {
that.options.after();
}
if (xhrObj === that.xhr) {
that.xhr = null;
}
});
}
};
var xhr = new XHRService({
reqDelay: 10,
loadingDelay: 10,
before: function() {
console.log('show loading...');//显现loadingbar
},
after: function() {
console.log('hide loading...');//隐蔽loadingbar
}
});
xhr.req({
url: url,
dataType: 'json'
}).done(function(data) {
console.log('done!');
});