Question

这是我目前的代码：

$(document).ready( function() {

// set variables
var delay = 3000;

setInterval( function() {

    // perform AJAX call
    var req = $.ajax({
        url: "view/jquery/jq.refresh.php",
        dataType: "json"
    });

    // process data from json
    req.done( function(data) {
        $("#now_playing").html(data.song);
        $("#queue_list").html(data.queue);

        delay = data.time;
    });        

}, delay);
});

......而且它没有按计划运作。

我们的想法是使用AJAX从数据库中检索可变延迟（歌曲的长度）。并将该延迟（歌曲的长度）放入setInterval，这样脚本将以可变间隔循环，具体取决于正在播放的歌曲的长度，希望减少服务器/数据库的负载。

我确定从数据库中检索到正确的延迟值，因为添加console.log(date.time);会显示歌曲的长度。

我有一个理论为什么我的代码无法工作，setInterval在实际处理代码之前读取其ms值，因此它始终设置为3000。另一个理论是delay = data.time没有改变delay值，因为它是在脚本开头设置的全局变量。

那么我有什么选择来实现可变间隔而不会崩溃/冻结浏览器？

Answer 1

因为在初始调用setInterval时设置了间隔。修改delay的值将无效。

您应该在此方案中使用setTimeout。

$(document).ready(function() {
    // set variables
    var delay = 3000;

    //Define a function
    function getData() {

        // perform AJAX call
        var req = $.ajax({
            url: "view/jquery/jq.refresh.php",
            dataType: "json"
        });

        // process data from json
        req.done(function(data) {
            $("#now_playing").html(data.song);
            $("#queue_list").html(data.queue);

            delay = data.time;
            //Schedule the subsequent execution 
            setTimeout(getData, data.time);
        });
    }

    //Schedule to execute after 3 seconds on page load
    setTimeout(getData, delay);
});

Answer 2

setInterval在实际处理代码之前读取其ms值，因此它始终设置为3000

是。您只需拨打setInterval一次，而delay设置为3000.在此之后更改delay的值将不会影响已安排的时间间隔。

如果您想要一个可变间隔，则无法使用setInterval。使用setTimeout，让每个回调将其后续回调排入队列。

function pollNext() {
    // perform AJAX call
    var req = $.ajax({
        url: "view/jquery/jq.refresh.php",
        dataType: "json"
    });

    // process data from json
    req.done( function(data) {
        $("#now_playing").html(data.song);
        $("#queue_list").html(data.queue);

       setTimeout(pollNext, data.time);
    });     

}

pollNext(); // Prime the initial invocation

Answer 3

delay调用setInterval()只读一次 - 声明间隔时。您在实例化后尝试更改delay变量将无效。

替代方法是链接setTimeout()调用，然后您可以更改下一个超时的延迟。试试这个：

function createTimeout(delay) {
    setTimeout(function() {   
        $.ajax({
            url: "view/jquery/jq.refresh.php",
            dataType: "json"
        }).done(function(data) {
            $("#now_playing").html(data.song);
            $("#queue_list").html(data.queue);
            createTimeout(data.time);
        });            
    }, delay);
}

createTimeout(3000);

jQuery - 可变间隔

3 个答案: