Converting a jQuery setInterval timing into a recursive setTimeout timing - php

Question

I have a code snippet for a Queue Management System here that dynamically fetch data from the database based from the number of window allowed to be shown on the screen.
var elementArray;
function fetchPayment() {
elementArray = new Array();
$('.win_id').each(function() {
// here's the moneyshot
elementArray.push(this);
});
doAjax(0);
}
function doAjax(param) {
if (typeof elementArray[param] === 'undefined') {
var win_id = 0;
} else {
var win_id = elementArray[param].value;
}
$.ajax({
type: "GET",
dataType: 'json',
// async: false,
url: "<?php echo base_url();?>queue/getCurrentTransaction/" + win_id,
success: function(data) {
param++;
if (param <= elementArray.length) {
$('.names-' + win_id).empty();
$('.names-' + win_id).append("<div class='pname'>" + data.customer_name + '<li>' + data.ref_code + '</li></div>');
doAjax(param);
} else {
console.log("!");
}
},
error: function(data) {
param++;
$('.names-' + win_id).empty();
$('.names-' + win_id).append("<div class='pname'><li></li></div>");
doAjax(param);
}
});
}
This works, however, it's too CPU intensive and it is admittedly a bad approach, I refactored my other functions to make them something like this:
(function fetchNewServiceConnection() {
setTimeout(function() {
$.ajax({
type: "GET",
dataType: 'json',
url: "<?php echo base_url();?>queue/getCurrentTransaction/" + 100,
success: function(data) {
$('.c_name').empty();
$('.c_name').append(data.customer_name + '<li>' + data.ref_code + '</li>');
fetchNewServiceConnection()
},
error: function(data) {
$('.c_name').empty();
$('.c_name').append('<li></li>');
fetchNewServiceConnection()
}
});
}, 500);
})();
This works much much faster. The problem is the code above, how do I convert it to be like the code snippet below?

Answer 1

Inside your
function doAjax(param) {
if (typeof elementArray[param] === 'undefined') {
var win_id = 0;
} else {
var win_id = elementArray[param].value;
}
$.ajax({
type: "GET",
// etc....
}
you have doAjax(param); in two places, one for success: and one for error:
replace doAjax(param); in both places with:
setTimeout(doAjax.bind(null, param), 500);
Note:
I'm not sure, but it looks like you're trying to do "real time data", so my suggestion is to look at WebSockets (https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), host your own, or, eventually, providers like Pusher.com (https://pusher.com/)