Question

我有下面的图像，我试图以3秒的间隔逐个显示它们，但我无法让它工作。它继续保持在0并且不显示图像，帮助会很好：

<img src="one.png"></img>
<img src="two.png"></img>

javascript：

window.animate = function(){
   var timer = '';
   var imgs = document.getElementsByTagName('img');
   for (var i = 0; i < imgs.length; i++) {
       var timer = setInterval(function(){
           alert(i);
            imgs[i].style.display = 'block';
       }, 3000);
       if(i == imgs.length){
           clearInterval(timer);
       }
   }
}

Answer 1

这可能是您正在寻找的内容：

window.animate = function(){
    var imgs = document.getElementsByTagName('img');
    var index = 0;
    var timer = setInterval(function() {
        // Hide all imgs
        for (var i = 0; i < imgs.length; i++)
            imgs[i].style.display = 'none';
        // Display next img
        imgs[index].style.display = 'block';
        index++;
        // Stop after all displayed.
        if (index >= imgs.length)
            clearInterval(timer);
    }, 3000);
}

Answer 2

由于这些基本上都是同时超时，因此您需要在间隔中实现回调模式以触发下一个，或者您需要增加每个索引的间隔;即将定时器的间隔设置为3000 *（i + 1），这将有效地触发延迟加上前一个延迟的下一个。然而，这并不考虑实际的图像负载。另外，我会考虑使用setTimeout，因为你只需要这样做一次。

var img = $('img.targets');
for (var i=0;i<img.length;i++) {

  var duration = 3000;
  setTimeout( function() {
    // do dom work here
  }, duration*(i+1));


}

Answer 3

这是一种方法：

小提琴：http://jsfiddle.net/aecuappp/

HTML：

<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>

JS：

var imgs = document.getElementsByTagName('img');
var interval = 3000;
for (var i = 0; i < imgs.length; i++) {
    (function (index, time) {
        setTimeout(function() {
            imgs[index].style.display = 'block';
        }, time);
    } (i, interval));
    interval = interval + 3000;
}

CSS：

img {
    display: none;
}

如果您想要立即显示第一张图片，基本上您可以将interval设为0。并且每次超时都会增加3秒，因为这些都是大致同时创建的。我将setTimeout包装在IIFE中，以便在超时需要我们创建超时时的值时提供interval和index范围。

Answer 4

您可以通过使用setTimeout排除一些超时，然后确保您correctly passing the value of i内的功能来完成此操作。您可以使用forEach而不是常规循环轻松完成此操作：

window.animate = function() {
    var imgs = document.getElementsByTagName('img');

    imgs.forEach(function(img, i) {
        setTimeout(function() {
            img.style.display = 'block';
        }, (i + 1) * 3000);
    });
};

Javascript以间隔逐个显示imgs

4 个答案: