;(function($) { function AjaxQueue(override) { this.override = !!override; } AjaxQueue.prototype = { requests: new Array(), offer: function(options) { var _self = this; var xhrOptions = $.extend({}, options, { complete: function(jqXHR, textStatus) { if($.isArray(options.complete)) { var funcs = options.complete; for(var i = 0, len = funcs.length; i < len; i++) funcs[i].call(this, jqXHR, textStatus); } else { if(options.complete) options.complete.call(this, jqXHR, textStatus); } _self.poll(); }, beforeSend: function(jqXHR, settings) { if(options.beforeSend) var ret = options.beforeSend.call(this, jqXHR, settings); if(ret === false) { _self.poll(); return ret; } } }); if(this.override) { this.replace(xhrOptions); } else { this.requests.push(xhrOptions); if(this.requests.length == 1) { $.ajax(xhrOptions); } } }, replace: function(xhrOptions) { var prevRet = this.peek(); if(prevRet != null) { prevRet.abort(); } this.requests.shift(); this.requests.push($.ajax(xhrOptions)); }, poll: function() { if(this.isEmpty()) { return null; } var processedRequest = this.requests.shift(); var nextRequest = this.peek(); if(nextRequest != null) { $.ajax(nextRequest); } return processedRequest; }, peek: function() { if(this.isEmpty()) { return null; } var nextRequest = this.requests[0]; return nextRequest; }, isEmpty: function() { return this.requests.length == 0; } } var AjaxManager = { queue: {}, createQueue: function(name, override) { return this.queue[name] = new AjaxQueue(override); }, destroyQueue: function(name) { if(this.queue[name]) { this.queue[name] = null; delete this.queue[name]; } }, getQueue: function(name) { return ( this.queue[name] ? this.queue[name] : null); } }; $.AM = AjaxManager; $.Logger = function(id) { this.logElem = $('#' + id).get(0); this.logArr = []; }; $.Logger.prototype = { constructor: $.Logger, append: function(comment) { this.logArr.push('<p>' + comment + '</p>'); }, flush: function() { this.logElem.innerHTML = this.logArr.join(''); }, clear: function() { this.logElem.innerHTML = ''; this.logArr = []; } }; })(jQuery); $.AM.createQueue('press', true); var logger = new $.Logger('log'); $('#searchbox').keypress(function() { $.AM.getQueue('press').offer({ url: '/echo/json/', type: 'post', data: { json: { 'name': 'Andrew', 'age' : 24 }, delay: 1 }, error: function() { logger.append('ajax canceled'); }, success: function() { logger.append('ajax succeeded'); }, complete: function() { //logger.flush('ajax completed'); } }); }); $('#showbtn').click(function() { logger.flush(); }); $('#clearbtn').click(function() { logger.clear(); })
<input type="text" id="searchbox" value="" placeholder="enter your keywords" /> <input type="button" id="showbtn" value="show log" /> <input type="button" id="clearbtn" value="clear log" /> <div id="log"></div>
#searchbox { border-radius: 5px; border: 1px solid #545454; box-shadow: 0 0 8px rgba(0, 0, 0, .6); padding: 2px 1px; height: 20px; width: 220px; } #log { font-size: 10px; }