JSFiddle - React, Tailwind, and code Playground

by oroce

JavaScript

$.ajaxDelay = function( opts ){
    console.log( opts.delay,opts );
    setTimeout( $.proxy( $.ajax, this, opts ), opts.delay );
};
var xhrObjs = {}
$(document).ajaxSend(function(ev, xhr, opts) {
    if (opts && opts.id) {
        if (!xhrObjs[opts.id]) {
            xhrObjs[opts.id] = xhr;
        }
        else {
            try {
                console.log("killed xhr with id: " + opts.id,opts.url,xhrObjs[opts.id]);
                xhrObjs[opts.id].abort();
            }
            catch (ex) {}
            finally{
                xhrObjs[ opts.id ] = xhr;
            }
        }
    }
});
$( document ).ajaxComplete(function( ev, xhr, opts ){
    if( opts && opts.id ){
    var oldXhr = delete xhrObjs[ opts.id ];
        console.log( "deleted xhr: "+ oldXhr, opts.url );
    }
});
$.ajax({
    url: "/almafa1",
    id: "pina"
});
setTimeout(function() {
    $.ajax({
        url: "/almafa2",
        id: "pina"
    });
}, 10);
setTimeout(function() {
    $.ajax({
        url: "/almafa3",
        id: "pina"
    });
}, 30);

$.ajaxDelay({
    url:"/pina4",
    id:"pina1",
    delay: 5000
});