Question

jQuery代码

var seconds = 6;
var timeout = seconds * 1000;

function request() {
    $.ajax ({
        url: "getdata.php",
        dataType: "json"
    }).done(function(data) {
        console.log(data); // check if json data is returned from the php script


        // somehow put the returned json data into a variable or return it?
        // this is where my problem is


    });
}

function doLoop() {
    request() // execute the ajax request to get data from database

    var items = // the returned json data from function request()
    var count = items.length;
    var repeat = count * timeout;

    $(items).each(function(idx, text) {
        $("#text").queue(function(next) {
            $(this).html(text);
            next();
        }).delay(timeout);
    });
}

setInterval(function() {
    doLoop();
}, repeat);

问题

问题是我无法获得ajax调用以返回json数据，因此我可以将其放入数组中。这导致无法计算阵列中有多少项并计算循环过程的间隔。

我希望完成的是使用setInterval的重复过程：

从函数request
将从request返回的json数据放入数组items
使用var count = items.length
使用setInterval

var repeat = timeout * count

通过显示其中的项目来处理数组，一次（此部分有效）
处理完整个数组后，返回步骤1刷新数据。（setInterval应该没问题）

Answer 1

var seconds = 6;
var timeout = seconds * 1000;
var repeat;

function doLoop() {
    $.ajax ({
        url: "getdata.php",
        dataType: "json"
    }).done(function(data) {
        var items = data;
        var count = items.length;
        repeat = count * timeout;

        $(items).each(function(idx, text) {
            $("#text").queue(function(next) {
                $(this).html(text);
                next();
            }).delay(timeout);
        });
        setTimeout(doLoop, repeat);
// use setTimeout() instead to make sure the 
//script won't trigger before finishing the previous job.
    });
}

$(document).ready(doLoop);

Answer 2

你必须改变逻辑。你想要的是启动请求，完成后你将返回的数据传递给另一个函数

function request() { 
   $.ajax({ ... }).done(function(data) {
       doLoop(data);
   }); 
}

function doLoop(items){
   /* do stuff here with items */
}

setInterval(function() {
    request()
}, time);

Answer 3

你的错误在于，因为Ajax是异步的（jQuery Ajax），所以doLoop（）中的所有内容都可能在Ajax调用完成之前执行。这就是为什么你得到一个空元素。

您需要做的是定义两个（或更多）函数：

function request() {
    $.ajax ({
        url: "getdata.php",
        dataType: "json"
    }).done(function(data) {
        doLoop(data);
    });
}

function doLoop(data) {
    var count = data.length;
    // Rest of your code
}

然后只需拨打request()一次即可启动ajax调用并循环播放。

Answer 4

因为AJAX是异步的，所以你需要在这里使用回调函数我更改了函数request以将回调函数作为参数：

function request(callback) {
    $.ajax ({
        url: "getdata.php",
        dataType: "json"
    }).done(function(data) {

        if(typeof callback === "function") callback(data);

    });
}

我在你的请求调用中放置了一个匿名函数作为你的回调函数：

function doLoop() {
    request(function(data){

        //once you get here, you know for sure that ajax is done

        var items = data; // the returned json data from function request()
        var count = items.length;
        var repeat = count * timeout;

        $(items).each(function(idx, text) {
            $("#text").queue(function(next) {
                $(this).html(text);
                next();
            }).delay(timeout);
        });
    });     
}

这个匿名函数由请求函数中的callback(data)调用。所以一旦你进入这个匿名函数的主体，你肯定知道ajax调用已经完成，你也可以在data参数中获取数据。

Answer 5

以这种方式尝试

var seconds = 6;
var timeout = seconds * 1000;
var items =null;

function request() {
    $.ajax ({
        url: "getdata.php",
        dataType: "json"
    }).done(function(data) {
        items =data;
    });
}

function doLoop() {
    $.when( request()).then( work, fail);
}

function fail(){
    //manage failure
 }


 function work(){
    var count = items.length;
    var repeat = count * timeout;
    $(items).each(function(idx, text) {
        $("#text").queue(function(next) {
            $(this).html(text);
            next();
        }).delay(timeout);
    });

}

setInterval(function() {
    doLoop();
}, repeat);

从请求中返回数据并在doLoop中对其进行管理。

remembar会在请求中向ajax调用添加cache:false option，以避免结果保留在缓存中。

我使用承诺

更新了我的答案

jQuery ajax请求返回数据并重复

5 个答案: