JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="click_btn" value="Click Here and Check Console" />
JavaScript
$(document).ready(function() {
var dataUrl = ['1','2','3','4','5','6','7','8','9','10'];
var completedRequest = 0;
function getResults(start) {
for(i=start; i < start+4; i++) {
//alert(typeof (dataUrl[i]));
if(typeof (dataUrl[i]) != 'undefined') {
$.ajax({
data: {
html: "<p>Text echoed back to request</p>" + "<script type='text/javascript'>$('target').highlight();<\/script>",
delay: 3,
},
method: 'post',
update: 'target',
url: '/echo/html/?q='+dataUrl[i],
complete: function(data) {
console.log('Got success for URL: '+this.url);
completedRequest ++;
if(completedRequest == 4 && (start+4) < dataUrl.length) {
getResults(start+4);
completedRequest = 0;
}
}
});
} else {
completedRequest = 0;
}
}
completedRequest = 0;
}
$('#click_btn').click(function() {
//Initiate first request
getResults(0);
});
});