js function calling another js function and returning a value problem

i have this JS function:

function ax_get_new_msg_cnt()
{   var mTimer; 
    var last_msg_id;
    mTimer = setTimeout('ax_get_new_msg_cnt();',30000);
    $.getJSON('/apps_dev.php/profile/newMessageCheck', function(data) 
{
        $('#newMessageDiv').text("You have " + data.msg_cnt + " new ");
        last_msg_id = data.msg_id;
    });
    return last_msg_id;
}

then i have the js function whe开发者_JS百科re i call ax_get_new_msg_cnt():

function ax_get_new_msg_details()
{
var mTimer; 
mTimer = setTimeout('ax_get_new_msg_details();',30000);
$.getJSON('/apps_dev.php/messagebox/newMessageDetails', function(data) 
{
    var str='<tr>';
    str += "<td class='td_show_contact_item' align='left' id='td_date'>"+data.td_date+'</td>';
    str += "<td align='left' id='td_subject'><a href='#' style='color:#ff0000 !important' class='spn_small_red_rbc'>"+data.td_subject+"</a></td>";
    str += "<td class='td_show_contact_item' align='left' id='td_from'>"+data.td_from +"</td>";
    //str += "<td id='block_url'>"+data.block_url+"</td>";
    str +='<tr>';
    var tbl = $('#td_date').parents('table');
    var msg_id = ax_get_new_msg_cnt();
    console.log(msg_id);
    if (msg_id == data.td_id)
    {

    }
    else
    {
       $(tbl).append(str);

    }   
});
}

in the above function i get msg_id as undefined...

can i do it the way i have it or is there another way please?

only if msg_id != data.td_id i want to do the append

thank you

You need to understand the asynchronous way of programming.

In your first method, when it gets called it starts an async JSON request to the webserver, which will return later in time, but your $.getJSON call return immediately, so your last_msg_id variable will be untouched and this untouched (undefined) variable will be returned by ax_get_new_msg_cnt function.

Later when the webserver returned with the answer and the answer is read by your browser it passes back to your callback function which sets the last_msg_id.

You can write console.log debug messages to see the timings:

1. if you insert a console.log('JSON start'); to your ax_get_new_msg_details method before the $.getJSON call
2. then one console.log('Response arrived'); to inside the function(data) part
3. and an another one right before the end with console.log('JSON request sent');

then, you'll probably see the way of executing.

What ever you want to do with msg_id you need to do it in $.getJSON callback function. You can not return it. The Ajax call is asyncron, so you have to wait till it is finished to get the value.

Because the $.getJSON() method is asynchronous, your ax_get_new_msg_cnt() function will return before the data is received, leaving last_msg_id as undefined.

Moreover, I think that the URL parameter for $.getJSON() should point to a file, not to a folder.

Note: you could improve your code by using the $.ajaxSetup method to set a default timeout for all your jQuery ajax requests.