How to pass responseText from asynchronous AJAX call to another function?

Question

I'm using jQuery and countdown (jQuery plugin). I want the countdown to run for x seconds, where x is an integer from serverTime.php.

Problem - I can't figure out how to return the responseText in function getTime(), so that it could be used in Timer function.

At first I tried using pure js (without jQuery), and I found similar topics:

Some ideas/possible solutions I've come across:

using synchronous call and a global variable for storing response. I tried this and don't consider it an option, because it freezes the user screen (and is considered bad practice as well, in most cases)
helper function .

Timer function:

$(function (){
    var time = getTime(); // time is an integer
    $('#defaultCountdown').countdown({until: time, format: 'S', onExpiry: action});
});

getTime() checks serverTime.php and should return the content, which will be an integer. Alert(html) works, while return html does not work. I know it's because the call is asynchronous.

function getTime()
{
    $.ajax({
    url: "serverTime.php",
    cache: false,
    async: true,
    success: function(html)
    {
        alert(html);
            helperFunction(html);
        return html;
    }
    });
}

helperFunction. Unfortunately, I don't know how to pass the result to timer function.

function helperFunction(response)
{
    return response;
}

serverTime.php

echo 30; // 30 seconds, just an example

I've tried to explain my problem and show that I've put some time into it. If you need additional information, just ask. Maybe I'm just thinking in the wrong direction.

user113716 · Accepted Answer · 2011-07-16T20:00:36.400

Your code doesn't show where the time variable is actually being used.

Ultimately, you can't return the AJAX response from the getTime() function because the AJAX is asynchronous, so getTime() will always return before the response is received.

You'd do better to pass whatever code you want into the getTime() function...

function getTime( func )
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: func  // <--set the function received as the callback
    });
}

   // pass a function to getTime, to be used as the callback

function myFunc( html ) { 
   /* do something with html */ 
}
getTime( myFunc );

...or call another function from inside the :success callback, passing it the response...

function getTime( func )
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function( html ) {
            someFunction( html ); // <--- call a function, passing the response
        } 
    });
}

someFunction( html ) {
    /* do something with html */
}

...or simply hardcode the proper code into the :success callback...

function getTime( func )
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function( html ) {
            /* do something with html */
        } 
    });
}

EDIT:

I now see where you want to use time. You could use my second example above. Just be sure that the function you create is in a variable scope that is accessible to your getTime() function.

Like this:

$(function (){
    getTime();  // get things started when the DOM is ready
});

function getTime() {
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function(html)
        {
            doCountdown( html );  // call doCountdown, passing it the response
        }
    });
}

   // doCountdown receives the response, and uses it for the .countdown()
function doCountdown( time ) {
    $('#defaultCountdown').countdown({until: time, format: 'S', onExpiry: action});
}

time variable is used in the timer function (was renaming variables to make it easier to read, and forgot to rename one which caused the confusion). Basically, I just want to get the value from serverTime.php into timer function. Haven't got your suggestions to work. I tried similar approaches before asking this question, and tried them once more now. And all the time I get stuck because the call is asynchronous and the response can't be returned. — afaf12, Jul 16 '11 at 19:41
@awerti: Yes, the response will *never* be available for return. Create a named function that can be called, that will *receive* the response from the AJAX, which it then can use for the `.countdown()`. Also, part of the problem may be that anything inside of `$(function(){...})` will be available to anything outside of it. I'll update in a minute. — user113716, Jul 16 '11 at 19:55
...in comment above, I meant to say *"will be unavailable to anything outside of it"* instead of *"available"*. — user113716, Jul 16 '11 at 20:58

score 1 · Answer 2 · answered Jul 16 '11 at 18:53

Because you are running your ajax asynchronously, it runs in a separate thread. This means where you set var time = getTime(); nothing is being set. By the time the ajax call to return html; runs, there is nothing waiting to receive the response. The original thread has finished running, and because the function getTime() didn't set anything, time will be blank.

You could, setup time as a global var, then call getTime(), and set time when the ajax call finishes - this all depends where and when you need to use time....

var time = 0;

$(function (){
    getTime()
    $('#defaultCountdown').countdown({until: austDay, format: 'S', onExpiry: action});
});

function getTime()
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function(html)
        {
            time = html;
        }
    });
}

Hmmm... Not really in a separate thread, but it certainly is non-blocking, which seems to be your main point. — user113716, Jul 16 '11 at 19:02

How to pass responseText from asynchronous AJAX call to another function?

2 Answers2