settimeout을 사용하여 jQuery 애니메이션을 지연시킵니다

Question

사용자가 버튼을 눌러 다음 이미지로 이동할 때 이미지에서 일부 전환 작업을 수행하고 있습니다. 서로 옆에 매우 좁은 여러 이미지가 있으면 해당 이미지는 동시에 전환됩니다. 그래서 이미지의 너비를 확인하고 얇은 것들을 배열에 추가 한 다음 배열의 각 객체의 전환을 실행합니다. 배열에서 각 이미지의 애니메이션 사이에 약간의 지연을 만들고 싶었으므로 1 초 타임 아웃 후 jQuery.animate를 실행하려고합니다.

성공하지 않고 시간 초과를 작동 시키려고 노력한 방법은 다음과 같습니다.

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

TransitionOut () :

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

CMS의 폐쇄 예제를 사용하여 작동했습니다. 하지만 이제는 새로운 문제가 발생합니다. 전환은 두 번째 이미지에서만 발생합니다. 3 개의 이미지가 있으면 이미지 1, 지연, 애니메이션 이미지 2, 애니메이션 이미지 3이됩니다. 2와 3 사이의 지연은 없습니다.

새 코드는 다음과 같습니다.

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

당신의 코드를 보면 나는 당신이 가지고 있다고 생각합니다 또 다른 폐쇄 문제, 사람들이 루프와 중첩 된 기능으로 일할 때 본 가장 일반적인 문제 일 것입니다.

그만큼 i 당신의 변수 setTimeout 콜백 함수 참조, ~는 똑같은 (JavaScript는 블록 스코프가 아닌 기능 스코프 만 가지고 있기 때문입니다), 그리고 그 함수가 비동기식으로 실행될 때까지, 루프는 이미 완성된, 그리고 i 변수에는 포함됩니다 set.length - 1 모든 경우에 setTimeout 사용.

평소와 같이, 캡처하십시오 i 다른 폐쇄를 사용하는 변수 :

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

타임 아웃을 사용하는 것은 시간이 정한 애니메이션/효과와 관련하여 속임수입니다.

나는 당신의 코드를 테스트하지 않았지만 그것을 탐색함으로써 당신이 사용하고 있음을 알았습니다. setTimeout 그들을 제거 할 것도없이.

'지연'중에 사용자가 이벤트를 트리거하면 어떻게됩니까? 당신은 그것을 관리하기 위해 무언가를 구현해야합니다.

죄송합니다. 지금은 당신을위한 답이 없습니다. 아마도 내가 나중에 더 많은 시간이 있거나 누군가가 더 우아한 솔루션이 나올 때 아마도 당신에게 답을 얻지 못합니다.

Answer 3

jQuery fadeout http://docs.jquery.com/effects/fadeout 콜백을 만들 수 있습니다. 콜백은 페이드 아웃이 완료 될 때 실행할 수있는 기능입니다. 따라서 원한다면 페이드를 묶을 수 있으므로 한 사람이 마무리하면 다음을 호출 할 수 있습니다. 그것이 당신이 찾고있는 것이 아니라면 나는 당신의 질문을 잘못 읽고있을 것입니다.

또한 예 3에서는 이렇게 쓰고 싶다고 생각하고 기능 정의가 세트 타임 아웃에 전달되지 않으므로 아무것도하지 않을 것입니다.

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);