(JQuery) for 루프가 증가하지 않습니다

Question

저는 JQuery를 처음 접했지만 실제로 이것은 나에게 다가 가지 못하는 간단한 문제입니다.

내가 자바 스크립트에서 문자열 배열을 통해 반복// 페이드 인/증분을 페이드 아웃하기 위해 노력하고있어,하지만 for 루프가 나는 그것의 단지 바보 같은 실수 확신 항상 정확히 4

$(document).ready(function() { 
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."]; 
    for(var j = 0; j < words.length; j++){ 
     $('#word').html(words[j]).fadeOut().delay(1000).fadeIn().delay(1000); 
    } 
}); 

입니다 나는 내 코드 때문에 눈이 멀었지만, 나 혼자 힘으로 누군가 나를 불러 낼 수 있을까?

앞서 환호하는 사람들.

Answer 1

여기서의 문제점은 무엇 실제로 일어나는 것은 이런 일이되도록 fadeOut 및 fadeIn이 비동기에서 실행되는 (아마도)입니다 :

1. 루프가 j == 0 시작은.
2. jQuery를는 #word 요소를 페치하고 word[0]
3. jQuery를 큐 요소에 네 애니메이션 그 내용을 설정 다시 fadeOut, delay, fadeIn 및 delay. j == 1는
4. 같은 일이 여기서 발생 - - jQuery를이 #word 요소를 발견하고 word[1]에 그 내용을 설정하고, 다시 같은 네 개의 애니메이션을 큐에 애니메이션이 비동기를 실행하기 때문에,
5. 루프가 계속 실행
6. fadeOut 시작됩니다.
7. fadeOut 아직 수행되지 않습니다. 그리고 만약 그렇다면, delay(1000)은 확실히 아닙니다.
8. 다음 세 번의 루프 실행은 위와 같이 실행되어 fadeOut이 완료되기 전에 내용을 word[4]으로 설정합니다.
9. 애니메이션 이벤트는 word[4] 같은 요소가 페이드 때마다 내용을 보여 자신의 차례에서 모두를 실행합니다.

당신은 애니메이션 이벤트가 될 때까지 요소의 내용을 업데이트 연기 콜백 함수를 사용할 필요가 끝마친.

Answer 2

필자가 올바르게 이해한다면 항상 최종 문자열 페이드 인/아웃을 보게됩니다.

루프가 페이드 효과로 다음 반복을 지연시키지 않기 때문입니다.

페이드 효과가 발생할 때까지 값이 증가하지 않도록 논리를 변경하거나 명시 적 루프를 사용하지 말아야합니다.

$(document).ready(function() { 
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."]; 
    //run against first string in array 
    $('#word').html(words[0]).fadeOut(complete).delay(1000).fadeIn().delay(1000); 

    //callback function 
    function complete() { 
     //check which word we're currently on 
     var index = words.indexOf($(this).html()); 

     //if it's not the last word, run the code with the next 
     if (index < words.length) { 
      $(this).html(words[index+1]).fadeOut(complete).delay(1000).fadeIn().delay(1000); 
     } 
    } 
}); 

http://jsfiddle.net/S9MQ9/1/

Answer 3

이, 당신의 문제를 해결 그것을 시도하고이 일을하면 우리에게 있습니다.

$(document).ready(function() { 
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."]; 
    for(var j = 0; j < words.length; j++){ 
    (function (index) { 
     $('#word').html(words[index]).fadeOut().delay(1000).fadeIn().delay(1000); 
    }(j)); 
    } 
});