JSFiddle - React, Tailwind, and code Playground

by anzeo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

JavaScript

function Q(callback){
    var _q = ko.observableArray([]),
        _isBusy = false,
        _callback = function(wrapper){
            callback(wrapper.value).done(function(){
                _isBusy = false;
                wrapper.$deferred.resolve();
                _q.valueHasMutated();                
            });
        };
    
    _q.subscribe(function(){
        if(_q().length && !_isBusy){
            _isBusy = true;
            _callback(_q().shift());
        }
    });
    
    this.enqueue = function(value){
        var _d = $.Deferred();
        _q.push({
            $deferred: _d,
            value: value
        });
        return _d;
    }
}

function process(qq){
    var _d = $.Deferred();
    setTimeout(function(){
        alert("processing " + qq);
        _d.resolve();
    }, 1000);
    return _d;
}
 
var q = new Q(process);
q.enqueue(12).done(function(){
    alert("processed twelve");
});
q.enqueue(34).done(function(){
    alert("processed thirty four");
});