Как повторять элементы со временем в jquery

Question

Я работаю над этим автоматизированным, без бесконечного слайд-шоу с динамически загружаемым контентом. Звуковое сопровождение каждого изображения должно сопровождаться звуком. До сих пор я получал динамическую загрузку обоих изображений и звуков. Но все происходит сразу, чего не должно быть. Я понял, что setTimeout может пригодиться здесь, чтобы установить интервал между каждой парой, но все, что я получил, - это либо последнее изображение, умноженное на счетчик итераций, либо скрипт, который вообще не работает. delay также не оказал никакой помощи. Вот Whot я получил до сих пор:

function displayImages(data){ 
    var count = data; 
    var pixBox = $('#picture-box'); 
    var imgPre = 'resources/exhibit-'; 
    var imgExt = '.png'; 
    var sndExt = '.wav'; 

    for(i = 1; i < count; i++) {   
     var imgSrc = '<img src="' + imgPre + i + imgExt + '">'; 
     var sndSrc = new Audio(imgPre + i + sndExt);     
     sndSrc.play(); 
     pixBox.append(imgSrc); 
    } 
} 

Мой вопрос: как установить setTimeout (или любой другой функции является лучшим здесь), для того, чтобы перебирать в течение долгого времени. Скажем, чтобы установить изменения пар img/sound каждые 2 секунды?

Answer 1

You может использовать setTimeout следующим образом:

function displayImages(cur, total){ 

    var pixBox = $('#picture-box'); 
    var imgPre = 'resources/exhibit-'; 
    var imgExt = '.png'; 
    var sndExt = '.wav'; 

    var imgSrc = '<img src="' + imgPre + cur + imgExt + '">'; 
    var sndSrc = new Audio(imgPre + cur + sndExt);     
    sndSrc.play(); 
    pixBox.append(imgSrc); 

    return setTimeout('displayImages(' + ((cur+1)%total) + ',' + total + ')', 2000); 

} 

И начните так: displayImages(0,total), где total соответствует вашей переменной data.

Причина, по которой я хочу использовать setTimeout, а не setInterval, заключается в том, что setTimeout вызывается только после завершения предыдущей функции. setInterval может получить назад и заморозить вашу страницу.

Обратите внимание, что функция возвращает дескриптор для timeout. Если вы хотите остановить анимацию, вы можете сделать это:

var animation = displayImages(0,total); 
...some code... 
clearTimeout(animation); 

и анимация остановится.

Answer 2

Вы можете использовать setInterval, это делает тот же код с каждым интервалом.

var myInterval = window.setInterval(displayImages, 2000); 

Это гарантирует, что ваша функция будет вызываться каждые 2000 миллисекунд.

Более подробная информация о MDN setInterval

Answer 3

Вы можете попробовать что-то вроде этого

$(function() { 
    var count = 100; 
    var i = 0; 
    var repeat = setInterval(function() { 

    if (i <= count) { 
     var imgSrc = '<img src="' + imgPre + i + imgExt + '">'; 
     var sndSrc = new Audio(imgPre + i + sndExt);     
     sndSrc.play(); 
     pixBox.append(imgSrc); 
     i++; 
    } 
    else{ 
     i = 0; //reset count if reaches threshold. 
    } 

    }, 5000); //5 secs 


}); 

С этим, если вы хотите сбросить интервал на любом случае вы можете просто вызов

clearInterval(repeat); 

Answer 4

Смотрите setInterval пример здесь: JSFiddle

var i = 0; 
setInterval(fadeDivs, 3000); 

function fadeDivs() { 
    i = i < images.length ? i : 0; 
    $('#my-img').fadeOut(200, function(){ 
     $(this).attr('src', images[i]).fadeIn(200); 
    }) 
    i++; 
}