使用setTimeout和setTimeout对数组进行无限次迭代 [英] Iterate an array infinite times with for each and setTimeout

问题描述

我在 myClass 中有此方法.当它到达数组的末尾时，我希望它再次从0开始，但是现在它刚刚停止.

I have this method in myClass. When it arrives at the end of the array, I want it to start again from 0, however at the moment it just stops.

this.jsonParse = function() {
    for (var i = 0; i < this.numberOfPhotos; i++){
         (function(index, selector, timing, arrayLength){
            setTimeout(function() {
               $(selector).css('background-color': obj_gallery.images[index].hex);
            }, index*timing);            
         })(i, this.slideWrap, this.timing,this.numberOfPhotos);
    }
}

我在下面尝试了类似的方法，但是它不起作用.

I have tried something like this below, but it doesn't work.

if (index >= arrayLength) {
    index = 0;
}

NB 本地变量，例如 this.numberOfPhotos 等已预先定义.

NB The local variables like this.numberOfPhotos etc. have been previously defined.

推荐答案

虽然我认为我了解您想要做的事情(无限期旋转图像)，但是您的方法却相当恐怖.假设您轮流播放了1000张图片，那么您至少要运行1000个计时器，然后一次加载全部1000张图片.

While I think I understand what you want to do (rotate the images indefinitely), your approach is rather horrible. Assuming you've got 1000 images in the rotation, you'd have at least 1000 timers running and you'd load all 1000 images at once.

相反，我会使用一种简单得多的方法，对您的索引使用取模运算符，并使用一个简单的函数来更新两个图库图像之一.

Instead I'd use a far less complex approach using a modulo operator on your index and a simple function to update one of two gallery images.

首先，基本HTML非常简单:

First, the basic HTML is very minimalistic:

<div id="gallery">
    <img id="gallery_a" onload="galleryLoaded()" />
    <img id="gallery_b" onload="galleryLoaded()" />
</div>

onload 事件用于在可见图像加载后实际进行切换，并防止在加载完成之前切换图像.

The onload events are used to actually toggle the visible image once they've been loaded and to prevent switching images before loading is complete.

我已经在JSFiddle上设置了一个示例来展示这种方法.

I've setup an example on JSFiddle to showcase this approach.

不需要任何特殊的CSS.为使过渡效果正常工作，您需要对第二张图像进行一些最小设置:

There's no special CSS needed for this. For the transition effect to work, you'll need some minimal setup for the second image:

#gallery_b {
    opacity: 0;
    transition: opacity 1s;
}

定期调用的功能(也可以通过按钮或某些链接启动)将更新当前图像的索引并交换当前不可见的图像:

The periodically called function (which may also be initiated by a button or some link) will update the current image's index and swap the image currently invisible:

// This function will init the switch
function galleryNext() {
    if (gallery_switching)
        return;

    // Prevent multiple switches at once    
    gallery_switching = true;

    // Get the next index (the modulo will make it wrap around)
    gallery_index = (gallery_index + 1) % images.length;

    // Update the inactive image
    // This could also update some link target or similar
    document.getElementById(gallery_second ? 'gallery_a' : 'gallery_b').src = images[gallery_index];

    // Toggle the next image
    gallery_second = !gallery_second;
}

onload 事件将切换图像(基本上只是根据需要隐藏第二个图像):

The onload event will switch images (essentially just hiding the second image as needed):

// This function is a callback once the next image has been loaded
function galleryLoaded() {
    if (!gallery_switching)
        return;
    gallery_switching = false;

    // If the second image is the next, we'll have to hide it now (since we want to show the first one)
    document.getElementById('gallery_b').style.opacity = gallery_second ? 1 : 0;
}

最后但并非最不重要的一点是，您必须设置时间间隔并获取要立即显示的第一张图像.

Last but not least you'll have to setup the interval and get the very first image to show immediately.

setTimeout(galleryNext, 0); // Fake "onload" here
setInterval(galleryNext, 2500); // Switch once every 5 seconds

当然，您也可以在其他地方为图像设置初始的 src .

Of course you could just set the initial src for the image somewhere else as well.

这篇关于使用setTimeout和setTimeout对数组进行无限次迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！