Wie übergeben Sie responseText aus einem asynchronen AJAX-Aufruf an eine andere Funktion?

Question

Ich benutze jQuery und countdown (jQuery-Plugin). Ich möchte, dass der Countdown für x Sekunden läuft, wobei x eine Ganzzahl aus serverTime.php ist.

Problem - Ich kann nicht herausfinden, wie ich den responseText in der Funktion getTime() zurückgeben kann, damit er in der Timer-Funktion verwendet werden kann.

Zuerst habe ich versucht, reines JS (ohne jQuery) zu verwenden, und ich habe ähnliche Themen gefunden:

• why-can-i-not-return-responsetext-from-an-ajax-function
• in-ajax-how-to-retrive-variable-from-inside-of-onreadystatechange-function
• how-to-return-variable-from-the-function-called-by-onreadystatechange-function
• und andere...

Einige Ideen/mögliche Lösungen, auf die ich gestoßen bin:

• Verwendung von synchronen Aufrufen und einer globalen Variablen zur Speicherung der Antwort. Ich habe dies versucht und halte es nicht für eine Option, da es den Benutzerbildschirm einfriert (und in den meisten Fällen auch als schlechte Praxis gilt)
• Hilfsfunktion. -

Timer-Funktion:

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

getTime() überprüft serverTime.php und sollte den Inhalt zurückgeben, der eine Ganzzahl ist. Alert(html) funktioniert, während return html nicht funktioniert. Ich weiß, dass dies daran liegt, dass der Aufruf asynchron ist.

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

helperFunction. Leider weiß ich nicht, wie ich das Ergebnis an die Timer-Funktion übergeben kann.

function helperFunction(response)
{
    return response;
}

serverTime.php

echo 30; // 30 Sekunden, nur ein Beispiel

Ich habe versucht, mein Problem zu erklären und zu zeigen, dass ich mir Zeit dafür genommen habe. Wenn Sie zusätzliche Informationen benötigen, fragen Sie einfach. Vielleicht denke ich einfach in die falsche Richtung.

Answer 1

Ihr Code zeigt nicht, wo die time-Variable tatsächlich verwendet wird.

Letztendlich können Sie die AJAX-Antwort nicht aus der getTime()-Funktion zurückgeben, weil der AJAX asynchron ist. Daher wird getTime() immer zurückkehren, bevor die Antwort empfangen wird.

Sie sollten besser den gewünschten Code in die getTime()-Funktion übergeben...

function getTime( func )
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: func  // <--setze die empfangene Funktion als Rückruf
    });
}

   // Eine Funktion an getTime übergeben, die als Rückruf verwendet wird

function myFunc( html ) { 
   /* etwas mit html machen */ 
}
getTime( myFunc );

...oder eine andere Funktion von innerhalb des :success-Callbacks aufrufen und ihr die Antwort übergeben...

function getTime( func )
{
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function( html ) {
            someFunction( html ); // <--- Funktionsaufruf, der die Antwort übergibt
        } 
    });
}

someFunction( html ) {
    /* etwas mit html machen */
}

...oder den richtigen Code einfach in das :success-Callback hardcodieren...

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

---

BEARBEITEN:

Jetzt sehe ich, wo Sie time verwenden möchten. Sie könnten mein zweites obiges Beispiel verwenden. Stellen Sie nur sicher, dass die von Ihnen erstellte Funktion in einem Variablenscope ist, auf das Ihre getTime()-Funktion zugreifen kann.

So wie hier:

$(function (){
    getTime();  // Dinge in Gang bringen, wenn der DOM bereit ist
});

function getTime() {
    $.ajax({
        url: "serverTime.php",
        cache: false,
        async: true,
        success: function(html)
        {
            doCountdown( html );  // doCountdown aufrufen, und die Antwort übergeben
        }
    });
}

   // doCountdown erhält die Antwort und verwendet sie für das .countdown()
function doCountdown( time ) {
    $('#defaultCountdown').countdown({until: time, format: 'S', onExpiry: action});
}

Answer 2

Dadurch, dass Sie Ihr Ajax asynchron ausführen, läuft es in einem separaten Thread. Das bedeutet, wo Sie var time = getTime(); setzen, wird nichts gesetzt. Wenn der Ajax-Aufruf zu return html; läuft, wartet nichts darauf, die Antwort zu erhalten. Der ursprüngliche Thread hat seine Ausführung beendet, und da die Funktion getTime() nichts gesetzt hat, wird time leer sein.

Sie könnten time als globale Variable einrichten, dann getTime() aufrufen und time setzen, wenn der Ajax-Aufruf beendet ist - das hängt alles davon ab, wann und wo Sie time verwenden müssen....

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