Denniz Denniz - 1 year ago 50
jQuery Question

jQuery - variable interval

Here's my current code:

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


...and it's not working as planned.

The idea was to retrieve a variable delay (length of a song) from a database with AJAX. And put that delay (length of the song) into
setInterval
, this way the script would loop at variable intervals depending on the length of the song that is playing, hopefully reducing server/database load.

I'm sure that the correct value for the delay is retrieved from the database as adding
console.log(date.time);
shows me the length of the song.

One theory I have why my code won't work is that
setInterval
reads its ms value before actually processing the code within, so it's always set to
3000
.
Another theory is that
delay = data.time
doesn't change
delay
value because it's a global variable set at the start of the script.

So what options do I have to achieve a variable interval without crashing/freezing the browser?

Answer Source

Since interval is set when initial call to setInterval made. modifying the value of delay will have no effect.

You should use setTimeout in this scenario.

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