用Mootools实现一个Ajax队列
因一个项目需要使用Javascript来实现一个排队机制,等上一个队列处理完毕之后,再执行下一个请求。下面是我用Mootools 实现的一个简单的队列Demo.
队列主文件: 来自Trickerise
Request.implement({
queue: function(sendArg){
if(!$defined(this.queued))
this.queued = [];
this.queued.push(sendArg);
this.processQueue();
},
processQueue: function(){
if(this.timer)
$clear(this.timer);
if (!this.check())
this.timer = this.processQueue.delay(250, this);
else {
if ($defined(this.queued[0])) {
this.send(this.queued.shift());
this.processQueue();
}
else
this.fireEvent('onQueueEmpty');
}
}
});
页面执行代码:
window.addEvent('domready', function() {
var start = $('start');
var r = new Request({
//队列请求的url
'url': '/misc/batch',
//请求成功之后.将response写入新建的div内.作为对页面的返回结果
onSuccess: function(response){
var response = new Element('div', {
'class': 'request-response',
'html': response
});
$('photo_upload').grab(response, 'bottom');
response.set('opacity', '0');
response.fade(1);
},
//全部完成之后,向页面写入完成信息
onQueueEmpty: function(){
working.set('html', '文件扫描完毕完成...');
$('loading').set('html',");
start.removeProperty('disabled');
start.setProperty('value','重新扫描');
start.setStyle('color','#000000');
}
});
//队列事件触发
start.addEvent('click', function(){
var req = new Request({
//先用ajax获取一个JSON对象
method: 'post',
data:{'action_id':31},
url: '/misc/ajaxScan',
onComplete:function(response){
//解开
var files = JSON.decode(response);
var nnn = files.length;
for(var pp=0; pp<nnn; pp++)
{
page_num = pp + 1;
//构造队列请求的数据内容
r.queue({
data: {
'n':page_num,
'project_id':'31',
'project_name':'EE',
'file_name':files[pp]
}
});
}
}
}).send();
});
})
- END -
