Liuyang.Blog()

因一个项目需要使用Javascript来实现一个排队机制，等上一个队列处理完毕之后，再执行下一个请求。下面是我用Mootools 实现的一个简单的队列Demo.

队列主文件: 来自Trickerise
Request.implement({<br /> queue: function(sendArg){<br /> if(!$defined(this.queued))<br /> this.queued = [];<br /> this.queued.push(sendArg);<br /> this.processQueue();<br /> },<br /> processQueue: function(){<br /> if(this.timer)<br /> $clear(this.timer);<br /> if (!this.check())<br /> this.timer = this.processQueue.delay(250, this);<br /> else {<br /> if ($defined(this.queued[0])) {<br /> this.send(this.queued.shift());<br /> this.processQueue();<br /> }<br /> else<br /> this.fireEvent(‘onQueueEmpty’);<br /> }<br /> }<br /> });<br />

页面执行代码:
window.addEvent(‘domready’, function() {<br /> var start = $(‘start’);<br /> var r = new Request({<br /> //队列请求的url<br /> ‘url’: ‘/misc/batch’,<br /> //请求成功之后.将response写入新建的div内.作为对页面的返回结果<br /> onSuccess: function(response){<br /> var response = new Element(‘div’, {<br /> ‘class’: ‘request-response’,<br /> ‘html’: response<br /> });<br /> $(‘photo_upload’).grab(response, ‘bottom’);<br /> response.set(‘opacity’, ’0′);<br /> response.fade(1);<br /> },<br /> //全部完成之后,向页面写入完成信息<br /> onQueueEmpty: function(){<br /> working.set(‘html’, ‘文件扫描完毕完成…’);<br /> $(‘loading’).set(‘html’,”);<br /> start.removeProperty(‘disabled’);<br /> start.setProperty(‘value’,'重新扫描’);<br /> start.setStyle(‘color’,'#000000′);<br /> }<br /> });<br /> //队列事件触发<br /> start.addEvent(‘click’, function(){<br /> var req = new Request({<br /> //先用ajax获取一个JSON对象<br /> method: ‘post’,<br /> data:{‘action_id’:31},<br /> url: ‘/misc/ajaxScan’,<br /> onComplete:function(response){<br /> //解开<br /> var files = JSON.decode(response);<br /> var nnn = files.length;<br /> for(var pp=0; pp<nnn; pp++)<br /> {<br /> page_num = pp + 1;<br /> //构造队列请求的数据内容<br /> r.queue({<br /> data: {<br /> ‘n’:page_num,<br /> ‘project_id’:’31′,<br /> ‘project_name’:'EE’,<br /> ‘file_name’:files[pp]<br /> }<br /> });<br /> }<br /> }<br /> }).send();<br /> });<br /> })<br />