jQuery fadein/fadeout, 배열을 통한 반복

Question

이 URL에서 - http://thespacebetweenthewords.org/sandbox/

jQuery fadein/fadeout 효과로 단어 배열을 순환하려고합니다.

그러나 표시된 단어 배열은 [0]에서 시작되지 않는 것 같습니다. 아마도 기능이 실행되는 순서로 무언가를 놓치고있을 것입니다.

커뮤니티의 누군가가 지금까지 코드에 대해 언급하고 싶다면 통찰력에 감사드립니다.

Answer 1

콜백 함수를 올바르게 사용하고 있습니다 .fadeIn() 단어가 페이딩 될 때까지 단어가 사라지지 않도록하기 위해 동사를 통과하는 동일한 원칙을 적용하지 않았습니다. 당신의 외부 for 루프는 모든 동사를 즉시 찢어 각각의 동사를 보여주고, 각각을 보여주고, 숨길 때까지 참을성있게 기다릴 것입니다 (물론 가장 최근의 동사만이 그때까지도 여전히 보여줄 것입니다).

당신은 다음과 같은 것을 시도 할 수 있습니다 :

function showWord(selector, words, wordTime, i) {
    if (words.length < i)
        return;
    var word = words[i];
    $(selector).html(word).fadeIn(wordTime, function() {
        $(selector).fadeOut(wordTime, function() {
            showWord(selector, words, wordTime, i + 1);
        });
    });
}
showWord("#verb-content", data.verbs, verbTime, 0);