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

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:

• why-can-i-not-return-responsetext-from-an-ajax-function
开发者_Python百科
• in-ajax-how-to-retrive-variable-from-inside-of-onreadystatechange-function
• how-to-return-variable-from-the-function-called-by-onreadystatechange-function
• and others...

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.

---

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});
}

---

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;
        }
    });
}