for 루프 내의 SetTimeout

Question

3 개의 이미지의 z- 인덱스를 변경하는 스크립트를 작성하려고합니다. 기본적으로 스크립트는 현재 이미지를 대상으로하고 다음 이미지에 더 높은 Z- 인덱스를 적용해야합니다. 예를 들어 일종의 회전식 모양이지만 활성 클래스가 아닌 Z- 인덱스가 있어야합니다. 문제는 특정 간격 후에 z- 색인을 설정하는 것입니다. 문제는 첫 번째 이미지가 표시되고 마지막 이미지가 표시된다는 것입니다.

HTML : :

<div class="changingimages"> 
    <img src="#" data-time="3000" width="100%" class="alternateimage alternateimage1"> 
    <img src="#" data-time="2000" width="100%" class="alternateimage alternateimage2"> 
    <img src="#" data-time="4000" width="100%" class="alternateimage alternateimage3"> 
</div> 

jQuery를 스크립트

<script type="text/javascript"> 

jQuery(document).ready(function(){ 

    var changeImg = function(i, time, currentImg) { 

     setTimeout(function(){ 

      jQuery(currentImg).next().css("z-index", i); 

     }, time); 
    }; 

    var numberOfChilds = jQuery(".changingimages").children().length; 
    var currentIndexClass; 
    var currentImg; 
    var time; 

    for (var i=1; i<=numberOfChilds; i++) { 

      currentIndexClass = '.alternateimage' + i; 
      currentImg = jQuery(currentIndexClass); 
      time = jQuery(currentIndexClass).attr("data-time"); 

      changeImg(i, time, currentImg); 

    } 

}); 

내가 루프 내부의 폐쇄 몇 가지 문제가 있다고 생각하지만, 확실하지 이건 내 코드입니다!

Answer 1

setTimeout은 이전에 대기중인 이벤트와 관련하여 이벤트를 실행하도록 예약하는 것이 일반적인 오해입니다.

setTimeout(f, 100); 
setTimeout(g, 100); 
setTimeout(h, 100); 

이 같은 타임 라인을 초래할 것입니다 : 당신은, 이론적으로는 다음과 같은 것을 믿는 것 같습니다

0ms Start 
100ms Run f() 
200ms Run g() 
300ms Run h() 

현실은 setTimeout의 시간 옵션에서 후이 기능을 실행 "을 의미한다는 것입니다 적어도이 많은 시간이 지났습니다. " 앞의 예 떨어져가는, 당신은 실제로 제대로 공간 밖으로 코드를 더 많은

0ms Start 
100ms Run f() 
101ms Run g() 
102ms Run h() 

같은 것을 얻을를 교체하지 않고 타임 아웃 시간을 계속 추가 할 것입니다.

var time = 0; 

for (var i = 1; i <= numberOfChilds; i++) { 
    currentIndexClass = '.alternateimage' + i; 
    currentImg = jQuery(currentIndexClass); 

    // Add to the previous time 
    time += parseInt(jQuery(currentIndexClass).attr("data-time"), 10); 
    changeImg(i, time, currentImg); 
} 

Answer 2

여기에는 원하는 것을 얻기 위해 시간 초과 사용을 구현하는 바이올린입니다. 타임 아웃이 비동기 및 순차적으로 실행되지 않기 때문에

fiddle

.textArea { 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    display: block; 
} 

.box_a { 
    background-color: blue; 
} 

.box_b { 
    background-color: red; 
} 

.box_c { 
    background-color: orange; 
} 

.active { 
    z-index: 3; 
} 


<div class="textArea box_a active">a</div> 
<div class="textArea box_b">b</div> 
<div class="textArea box_c">c</div> 

$(function(){ 
    var $elem = $('.textArea'); 

    timeout(0); 

    function timeout(i){ 
    $($elem[i]).addClass('active'); 
    return setTimeout(function(){ 
     $elem.removeClass('active'); 
     i++; 
     if(i >= $elem.length){ 
     i = 0 
     } 
     timeout(i); 
    }, 1000) 
    } 
}); 

참고는, 루프를 사용하지 않는다. 각 시간 초과는 기본적으로 동시에 실행되고 대기 시간을 기준으로 동작합니다.

해결 방법은 인덱스를 추적하고 마지막 시간 제한 실행이 완료되었을 때의 기능을 만드는 것입니다.