задержка JQuery против SetTimeout для джекпота «Волчок» изображения подкачки

Question

Сценарий:

Я хочу создать JQuery управляемого джек-пот «вертушку», который будет быстро последовательность ряда случайных изображений через DIV, прежде чем остановиться на одном, с интервал задержки между каждыми равными, но сменными. Для макетов я просто меняю классы цвета CSS на поле, хотя в финале я буду использовать фоновые изображения.

Я думал, что это будет непросто сделать с петлей. Я уверен, что есть более эффективный способ сделать это, но угадал, что нижеследующее будет работать нормально. Однако я обнаружил, что у меня нет возможности контролировать скорость обмена цветом CSS. Это мгновенно перескакивает через класс цветов и показывает последний. Я бы хотел, чтобы это была задержка.

jQuery delay(), похоже, не работает при соединении с addClass(), хотя он отлично работает с эффектами. Поэтому я попытался использовать window.setTimeout, но, насколько я вижу, в этом контексте ему нужен вызов функции kludgey. Код, как указано ниже, выполняет все вызовы функций после запуска цикла. Это проблема закрытия? Не хотите использовать setInterval, потому что это будут ограниченные итерации.

Спасибо за любой совет!

for (var j= 9; j >= 0; j--) { 
    $('#box1').attr('class', 'boxes'); // strips all current classes, replaces them with class 'boxes', which has general CSS characteristics 
    var numRand = Math.floor(Math.random() * 6); 
    var randomClass = colorArray1[numRand]; // pull random class from an array of six choices 
    $('#box1').addClass(randomClass); 

    // Everything above here works fine, would like loop delay here 
    // Tried using straight-up setTimeout -- doesn't appear to like loops 
    window.setTimeout(outerFunc, 1000); 
}; 

function outerFunc() { 
    alert('nobody here but us chickens!'); 
}; 

Answer 1

Если вы хотите использовать .delay() с методом, как .addClass(), вы можете добавить его в очередь с jQuery's .queue() method.

$('#box1').delay(1000) 
      .queue(function(nxt) { 
       $(this).addClass(randomClass); 
       nxt(); // allow the queue to continue 
      }); 

В противном случае, если я получаю то, что вы хотите, вы могли бы умножить 1000 мс для setTimeout() текущим значением j, так что каждый раз, когда продолжительность увеличивается.

window.setTimeout(outerFunc, (1000 * j)); 

Answer 2

setTimeout и setInterval работают по-разному в JavaScript, чтобы, как вы хотите использовать их.

Обе функции выполняют функцию, которую вы передаете, и присоединяете их к объекту DOM window. Затем, после того, как прошедшая просрочка прошла, и когда в настоящий момент нет другого скрипта, они вызываются из объекта window.

Чтобы получить функциональные возможности, вам нужно будет преобразовать свой код, чтобы вызов jQuery addclass находился внутри функции, которую вы передаете в setTimeout.

Answer 3

Возможно, рекурсия будет работать?

// this code is not tested 
var j = 9; 
function myFunc() { 
    // code here 
    j--; 
    if(j >= 0) setInterval(myFunc, 1000); 
} 

Я не использовал класс очереди в JQuery сам (первый я слышал об этом, но это звучит круто). Это может быть лучшим ответом, но это должно быть достойной альтернативой, если очередь работает не так, как ожидалось.

UPDATE: Я только заметил, что в вашем коде похоже, что вы ожидаете, что setTimeout будет работать как Thread.Sleep в .Net. setTimeout не работает. Он больше похож на Thread.Start, где ваш код продолжается, как только вы его вызываете.