JQuery - переменная интервал

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 считывает значение мс до фактического обработки кода внутри, так что всегда имеет значение 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);