如何在jQuery中迭代元素隨着時間的推移

我正在處理這個自動的，無盡的幻燈片，動態加載的內容。每個圖像都必須以聲音爲準。到目前爲止，我已經動態加載了圖像和聲音。但這一切都發生在一次，它不應該。我想，setTimeout可以在這裏派上用場，來設置每一對之間的間隔，但我得到的只是最後一張圖片乘以迭代計數或者腳本根本不工作。 delay也沒有證明是有幫助的。這裏的whot我走到這一步：如何在jQuery中迭代元素隨着時間的推移

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（或任何功能是最好的在這裏），因爲它隨着時間的推移迭代。說，要每2秒設置一次img/sound對的變化？

來源

2016-02-05 roonroon

你需要'setInterval' - https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval – colecmc

你可以這樣使用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);

動畫將停止。

來源

2016-02-05 01:37:29 cuniculus

仍需得到clearTimeout thingie的竅門，但這是拯救了我的生活！謝謝，先生，你是夥計！ – roonroon

不客氣:) – cuniculus

您可以使用setInterval，它會在每個間隔都執行相同的代碼。

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

這將確保你的函數被調用每2000毫秒。在MDN setInterval

來源

2016-02-05 01:22:19 JonSpr

更多信息，你可以嘗試這樣的事情

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

來源

2016-02-05 01:26:14 progrAmmar

見這裏的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++; 
}

來源

2016-02-05 01:55:40 DDan

如何在jQuery中迭代元素隨着時間的推移

回答

相關問題