JSFiddle - React, Tailwind, and code Playground

by AndrewZhang

HTML

<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>

CSS

#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;
}

JavaScript

;(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;    
 ...