How to call setinterval function in another function is not working

Question

I want to display Updated records count when Ajax process is going on. When i click on start process button updateRecords()function will execute and it will update records status from open to waiting status one by one in database.So at the same time i want display the waiting records count .For this when user click on strat process button i want to call displayWaitingRecords() using setinterval.

I am calling that function like this from updateRecords()

clear_Process = setInterval(function(){displayWaitingRecords()},200);

But displayWaitingRecords() will not call until updateRecords() process completes.But my requirement is displayWaitingRecords() also will execute simaltaniously with updateRecords() .

Function to display updated record count

function displayWaitingRecords()
{
    jQuery.ajax({
        type: 'GET',
        crossDomain:true,
        async: false,
        url: "/curlRRQCount.php",
        success: function(count){
            if(count)
            {
                jQuery("#processed_poids_div").html("Processed Order ids:"+count) ;
            }                 
        }
    });  
}

Function when i click on start process button

var clear_Process = "";
function updateRecords()
{
    clear_Process = setInterval(function(){displayWaitingRecords()},200);  
    var str = jQuery("#rrq_form :input[value!='']").serialize();
    jQuery.ajax({
        async: false,
        type: 'POST',
        data : str,
        url: "/updaterecord_status.php",
        success: function(valid_result)
        {
            if(jQuery.trim(valid_result) == 'Success')
            {
                jQuery("#rrq_load_img").hide();
                jQuery("#rrq_orders_status").html("some success message");
            }
        }
    }); 
}

Where i am doing wrong? Any help would be greatly appreciated.

Answer 1

You have set async: false . So the ajax call will process synchronized. Set it to false or leave it out (because true is default):

var clear_Process = "";
function updateRecords()
{
    clear_Process = setInterval(function(){displayWaitingRecords()},200);  
    var str = jQuery("#rrq_form :input[value!='']").serialize();
    jQuery.ajax({
        async: true,
        type: 'POST',
        data : str,
        url: "/updaterecord_status.php",
        success: function(valid_result)
        {
            if(jQuery.trim(valid_result) == 'Success')
            {
                jQuery("#rrq_load_img").hide();
                jQuery("#rrq_orders_status").html("some success message");
            }
        }
    }); 
}

If you leave it out you have the same result:

function displayWaitingRecords()
{
    jQuery.ajax({
        type: 'GET',
        crossDomain:true,
        url: "/curlRRQCount.php",
        success: function(count){
            if(count)
            {
                jQuery("#processed_poids_div").html("Processed Order ids:"+count) ;
            }                 
        }
    });  
}