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（或者这里最好的函数），以便随着时间的推移进行迭代。比如，每隔2秒设置一次img /声音对的变化？

Answer 1

您可以像这样使用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++;
}

如何在jquery中迭代元素

4 个答案: