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

Question

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

问题 - 我不知道如何在函数 getTime() 中返回 responseText，以便它可以在 Timer 函数中使用。

起初我尝试使用纯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;
    }
    });
}

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

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

---

编辑:

我现在知道你想在哪里使用time了。你可以使用我上面的第二个例子。只需确保您创建的函数位于您的 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});
}