jQuery each和计时循环

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.

Answer 1

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();

Answer 2

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);