javascript - 如何将异步 AJAX 调用中的responseText传递给另一个函数？

Question

我正在使用 jQuery 和 countdown (jQuery 插件)。我希望倒计时运行 x 秒，其中 x 是 serverTime.php 中的整数。

问题 - 我无法弄清楚如何在函数 getTime() 中返回responseText，以便它可以在计时器函数中使用。

起初我尝试使用纯js(没有jQuery)，并且发现了类似的主题:

• 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
• 还有其他人...

我遇到的一些想法/可能的解决方案:

• 使用同步调用和全局变量来存储响应。我 尝试过这个，但不要认为它是一个选项，因为它会卡住 用户屏幕(在大多数情况下也被认为是不好的做法)
• helper function .
-

定时器功能:

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

getTime() 检查 serverTime.php 并应返回内容，该内容将是一个整数。 Alert(html) 有效，而 return html 无效。我知道这是因为调用是异步的。

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

helperFunction。不幸的是，我不知道如何将结果传递给计时器函数。

function helperFunction(response)
{
    return response;
}

serverTime.php

echo 30; // 30 seconds, just an example

我试图解释我的问题并表明我已经投入了一些时间。如果您需要更多信息，请询问。也许我只是想错了方向。

Answer 1

您的代码未显示实际使用 time 变量的位置。

最终，您无法从 getTime() 函数返回 AJAX 响应，因为 AJAX 是异步，因此 getTime() 始终会在收到响应之前返回。

您最好将所需的任何代码传递到 getTime() 函数中...

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

...或者从 :success 回调内部调用另一个函数，并将响应传递给它...

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 */
}

...或者只是将正确的代码硬编码到 :success 回调中...

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

---

编辑:

我现在知道您想在哪里使用时间。你可以使用我上面的第二个例子。只需确保您创建的函数位于 getTime() 函数可以访问的变量范围内即可。

像这样:

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