JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="no priority" onclick="ajaxCall()" />
<input type="button" value="priority 1" onclick="ajaxCall(1)" />
<input type="button" value="priority 2" onclick="ajaxCall(2)" />
<input type="button" value="priority 0" onclick="ajaxCall(0)" />
<br>
<p><b>Log:</b></p>
<div class="log">
</div>
<input type="button" value="Clear log" onclick="document.getElementsByClassName('log')[0].innerHTML=''" />
<input type="button" value="Reset calls" onclick="window.outgoing=[];window.sent=[]" />
CSS
body{
padding:20px;
font-family:arial;
}
input{
margin:3px;
display:block;
padding:5px;
}
.log{
margin-top:5px;
padding:5px;
background:lightGrey;
width:400px;
height:200px;
border:2px solid gray;
overflow:auto;
}
JavaScript
function log(x){
var xlog= document.getElementsByClassName('log')[0];
var p =document.createElement('p');
p.innerHTML=x;
xlog.appendChild(p);
}
function ajaxCall(p){
$.ajax({
url: 'http://google.com?priority='+p,
type: 'GET',
priority:p
});
}
(function( $ ){
var oldAjax=$.ajax;
window.outgoing=[];
window.sent=[];
$.ajax=function(url, settings) {
var pr =(typeof url==='object'?url:settings).priority;
pr = pr===undefined ? 1 : pr;
if(pr!==undefined){
if(pr==0 || sent[pr-1]!==undefined){
log('Ajax sent, priority: '+pr);
oldAjax(url,settings);
sent[pr]=true;
if(outgoing[pr] && outgoing[pr].length){
var rq=outgoing[pr].splice(0,1)[0];
$.ajax(rq[0],rq[1]);
}
if(outgoing[pr+1] && outgoing[pr+1].length){
var rq=outgoing[pr+1].splice(0,1)[0];
$.ajax(rq[0],rq[1]);
}
}
else{
log('Ajax queued, priority: '+pr);
if(outgoing[pr]!==undefined){
outgoing[pr].push([url,settings]);
}
else{
outgoing[pr]=[[url,settings]];
}
}
}
else{
log('Ajax sent, no priority');
oldAjax(url, settings);
}
};
})( jQuery );
jQuery.each( [ "get", "post" ], function( i, method ) {
jQuery[ method ] = function( url, data, callback, type, priority ) {
// shift arguments if data argument was omitted
if ( jQuery.isFunction( data ) ) {
priority = type;
type = type || callback;
callback = data;
...