jQuery each and timing loops

일련의 중첩 된 타이밍 루프를 작성하려고합니다. 내부 루프는 동일한 CSS 클래스로 6 개 항목을 반복하고 4 초 동안 이미지를 스왑 아웃합니다. 외부 루프는 내부 루프를 계속 반복합니다. 그래서 image1 swaps, image2 swaps ... image6 swaps, image1 swaps, image2 swaps ... 각 div에는 두 개의 이미지가 있는데 하나는 'hot'클래스이고 다른 하나는 'cold'클래스입니다. 처음에는 '뜨거운'이미지가 숨겨집니다.jQuery each and timing loops

다음 코드는 24 초 후에 모든 이미지를 한 번에 바꾼 다음 다른 작업을 수행하지 않는 것 같습니다.

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

누구에게도 이것이 작동하지 않는 이유에 대한 지침이 있다면 분명 감사 할 것입니다.

출처

2013-11-24 L_Holcombe

모든 .bind

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

를 사용하여 컨텍스트를 바인딩 시도하지만 코드는 여전히 당신이 원하는 것을하지 않는 생각, 난 당신이 필요하다고 생각 setTimeouts는 동시에 시작되므로 모두 동시에 종료됩니다. 루프의 현재 색인을 기반으로 기간을 수정하여 각 루프가 이전보다 오래 걸리게하십시오. –

가능한 복제본 [JavaScript 루프에 지연을 추가하려면 어떻게합니까?] (http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) –

문제를 다음과 같이 뭔가를 할 것은 다음 setTimeout 내부 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);

을 :의

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

출처

2013-11-24 04:53:06

이것은 내가 필요한 것에 아주 가깝다. 그러나 각 반복마다 토글 시퀀스가 두 번 발생해야합니다. 콜드 오프, 핫온 및 4 초 후 핫 오프 및 콜드 온으로 진행해야합니다. –

@L_Holcombe : 업데이트 된 답변이 필요한지 확인하십시오. –

원본 코드를 통해 해결책을 찾았습니다. 많은 감사합니다. –

이 변수는 setTimeout 함수 내에서이 변수를 참조하지 않습니다.

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

출처

2013-11-24 04:11:26

jQuery each and timing loops

답변

관련 문제