jQuery each and timing loops

Question

I am trying to build a series of nested timing loops. The inner loop iterates through 6 items with the same CSS class and swaps out an image for 4 seconds. The outer loop causes the inner loop to repeat continuously. So, image1 swaps, image2 swaps... image6 swaps, image1 swaps, image2 swaps... There are two images in each div, one with class 'hot' and one with class 'cold'. At the start, the 'hot' images are hidden.

The following code swaps all the images at once, after 24 seconds, and then doesn't seem to do anything else.

        var innertime = 4000; //highlight effect time in ms
        var outertime = innertime * 6;
        setInterval(function() {
            $.each($('.eachsponsor'), function(){
                $(this).find('img.cold').css("display","none");
                $(this).find('img.hot').css("display", "block");
                setTimeout(function(){
                    $(this).find('img.hot').css("display","none");
                    $(this).find('img.cold').css("display", "block");
                }, innertime);
            });
        }, outertime);

If anybody has any pointers on why this doesn't work, I'd sure appreciate it.

all of the setTimeouts are started at the same time, therefore they all finish at the same time. modify your duration based on the current index of the loop so that each one takes longer than the previous. — Kevin B, Nov 24 '13 at 04:05
possible duplicate of [How do I add a delay in a JavaScript loop?](http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — Matt Ball, Nov 24 '13 at 04:05

Khanh TO · Accepted Answer · 2013-11-24T05:35:53.973

Your problem is: this inside the setTimeout is the global. Try binding the context using .bind

setTimeout(function(){
           $(this).find('img.hot').css("display","none");
           $(this).find('img.cold').css("display", "block");
      }.bind(this),innertime);

But I think your code still does not do what you want, I think you need this:

var innertime = 4000;
var eachsponsor = $('.eachsponsor');
$.each(eachsponsor, function(){
       $(this).find('img.cold').hide();
       $(this).find('img.hot').show();
});

var currentIndex = 0;
setInterval(function(){
      var currentDiv = eachsponsor.eq(currentIndex);
      currentDiv.find('img.hot').toggle();
      currentDiv.find('img.cold').toggle();

      currentIndex = (currentIndex+1) % eachsponsor.length;
 }, innertime);

Updated:

var innertime = 4000;
    var eachsponsor = $('.eachsponsor');
    $.each(eachsponsor, function(){
           $(this).find('img.cold').hide();
           $(this).find('img.hot').show();
    });

    var currentIndex = 0;

    function slideNext(){
          var currentDiv = eachsponsor.eq(currentIndex);

          currentDiv.find('img.cold').hide();
          currentDiv.find('img.hot').show();

          setTimeout(function(){
              currentDiv.find('img.hot').toggle();
              currentDiv.find('img.cold').toggle();
              currentIndex = (currentIndex+1) % eachsponsor.length;
              slideNext();
          },innertime);
    }

    slideNext();

This is very close to what I need. But the toggle sequence needs to happen twice on each iteration. Should go cold-off, hot-on, and then four seconds later, hot-off and cold-on. — L_Holcombe, Nov 24 '13 at 05:24
@L_Holcombe: check updated answer to see if this is what you need. — Khanh TO, Nov 24 '13 at 05:36

score 1 · Answer 2 · answered Nov 24 '13 at 04:11

this variable, inside setTimeout function, does not have reference of outside this. do something like following

 setInterval(function() {
            $.each($('.eachsponsor'), function(){
                var that = this;
                $(this).find('img.cold').css("display","none");
                $(this).find('img.hot').css("display", "block");
                setTimeout(function(){
                    $(that).find('img.hot').css("display","none");
                    $(that).find('img.cold').css("display", "block");
                }, innertime);
            });
        }, outertime);

jQuery each and timing loops

2 Answers2