javascript - How do I handle this jquery loop?

Question

I have an array of images that I want to loop through infinitely ie. 1, 2, 3, 1, 2, 3...

At first, I tried to do this using the following code:

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var obj = { currentValue: 0 };
var maxValue = 2;            

//loop through the items
var infiniteLoop = setInterval(function() {
  if(obj.currentValue == maxValue) { 
    obj.currentValue = 0;                                           
  }

  // ... Code to fade in currentItem ...

  obj.currentValue++;
}, 5000);

I'd read that this is correct method of passing in a variable by reference but for some reason, I'm never able to set the obj.currentValue back to 0 when all the images have been looped through.

I figured an alternative way would be to set the value of an html field:

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var maxValue = 2;            

//loop through the items
var infiniteLoop = setInterval(function() {
  if(parseInt($('#currentItem').val()) == maxValue) { 
    $('#currentItem]').val('0');                                           
  }

  //... code to fade in currentItem ...

  var tmp = parseInt($('#currentItem').val());
  tmp++;                                  
  $('#currentItem').val(tmp);
}, 5000);

<input type="hidden" id="currentItem" name="currentItem" value="0" />

However I'm still having the same problem. For some reason, whenever I hit the end of the image list, I'm unable to set the value of the hidden field and my infinite loop never gets to restart.

Am I missing something obvious here? I can't seem to figure out how to get this working.

If anyone has a more efficient method of achieving this I'd also be very grateful if you could share it :-)

Thanks

score 2 · Accepted Answer

所以我稍微改写了你的js，并评论了如何/为什么做事

// Give your code a unique namespace using an immediately/self invoked annonymous function
(function (window) {

    // For better management we could use some more variables
    // slider.images.length replaces maxvalue
    var slider = { 
        images: [
          "/images/image1.jpg",
          "/images/image2.jpg",
          "/images/image3.jpg"
        ], 
        current: 0, // name your variables semantically, we know this is going to have a value so don't 'append' things to the name that are obvious
        time: 5000
    };

    // separated the function so we DRY
    function rotate() {
        // Remember that the images array is 0 indexed and length gives the total amount of 
        // items in the array which will be one more, if they're the same then we reset 
        // current to 0
        if(slider.current == slider.images.length)
            slider.current = 0;

        // Code to do w/e
        console.log(slider.images[slider.current], slider.current);

        slider.current++;
        window.loop = setTimeout(rotate, slider.time);
    }

    // only thing about intervals really, they never stop, and can never be stopped
    // so better thing to do is use a recursive timeout, and ideally it should be available 
    // somehow so you can stop it outside of the script itself, in this case we put the 
    // reference on window. (which is not ideal, anywhere else it makes sense is better)
    window.loop = setTimeout(rotate, slider.time);

}( window ));

在 jsFiddle 中：

http://jsfiddle.net/sg3s/RGQxY/5/

您正在使用 jquery 来做事，这很好，但是您必须传递 jQuery 才能在包装器看起来像这样的立即调用的函数中使用它：(function ($, window) { /* code goes here */ }( jQuery, window ));.

score 1 · Accepted Answer

可以只使用两个循环。

while (1==1) 
{ // infinite loop
    for (int i = 0; i < images.length; i++) 
    { // loop images array
        console.log(images[i]);
    }
}

无限期打印三个图像路径。

score 1 · Accepted Answer

setInterval 有时无法正常工作。您是否尝试过 setTimeout ？您可以执行以下操作，看看它是否有效：

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var obj = { currentValue: 0 };
var maxValue = 2;            

function fn() {
  if(obj.currentValue == maxValue) { 
    obj.currentValue = 0;                                           
  }

  // ... Code to fade in currentItem ...

  obj.currentValue++;
  setTimeout(fn,5000);

}

//loop through the items
var infiniteLoop = setTimeout(fn,5000);

score 1 · Accepted Answer

如果我理解正确，您想在计数器达到 maxValue 时循环遍历。尝试如下所示，

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var maxValue = 2,
    counter = 0;

var infiniteLoop = setInterval(function() {
    var curIndex = (counter++ % (maxValue + 1));
}, 5000);

演示

score 1 · Accepted Answer

在您的第一个示例中，更改：

if(obj.currentValue == maxValue) {

至

if(obj.currentValue > maxValue) {

事实上，它无法处理索引 2，因为它被重置回 0。

javascript - How do I handle this jquery loop?

5 回答 5

Related

Reference