jQuery : 애니메이션 및 타임 아웃 큐잉을 방지 하시겠습니까?

Question

해결할 수있는 간단한 문제가있을 수 있지만 올바른 접근 방법이 무엇인지 알지 못합니다.

나는 내 웹 사이트 상단에 기본적으로 숨겨져있는 div.notification 막대를 가지고 있습니다. 바에는 success 또는 warning이라는 추가 클래스가 있으며 필요하면 display:block;으로 설정됩니다.

그래서 두 가지 경우가 있습니다. 출력 메시지가 페이지로드시 .notification 막대에 직접 렌더링되거나 (success 또는 warning의 클래스를 가져옴) 또는 .notifcation 막대가 위에서 아래로 슬라이딩되어 json 데이터가 제공됩니다.

어떤 식 으로든 알림 표시 줄은 항상 10 초 동안 표시되고 슬라이드 백으로 표시되어야합니다.

따라서이 막대를 처리하는 두 가지 함수를 작성했습니다.

var timing = 10000; 
function notificationOutput(type, message) { 
    var note = $('.notification'); 
    note.hide(); 
    note.find('.message').html(message); 
    note.stop(true,true).slideDown().delay(timing).slideUp(); 
} 

function notificationSlideUp(slideUp) { 
    var note = $('.notification'); 

    if (slideUp) note.delay(timing).slideUp(); 
     else note.stop(true,true).slideUp(); 
} 

그래서 notificationOutput() 기능은 상자에 그것을 JSON 데이터를 반환하고 렌더링 여러 가지 다른 기능에서 트리거됩니다.

그리고 notificationSlideUp() 기능은 지금 때문에 나는이를 내 헤더에있는 모든 페이지로드라고 ...

<script type="text/javascript"> 
    $(document).ready(function(){ 
     notificationSlideUp(true); 
    }); 
</script> 

을 그리고 이유는 거기에있다! .notification이 페이지로드시 직접 표시되도록 설정된 경우를 기억합니다. 예 : 사용자가 내 플랫폼에 로그인하면 .notification 표시 줄이 바로 보이고 "환영 사용자 이름, 로그인했습니다"라고 표시됩니다.

내 머리글에 notifictaionSlideUp() 함수를 호출하여 현재 표시되는 .notification 막대가 10 초 후에 다시 slideUp()가되도록합니다.

여기에 문제가 발생합니다 ... 어떻게 든이 모든 통지 타이밍이 발생하고 위아래로 밀려 "혼란스럽게"됩니다. 따라서 함수에 note.stop(true,true) 함수가 없으면 페이지로드 후 처음 10 초 이내에 알림이 slideDown()에 즉시 전달되지 않으므로 slide-function 및 delay() 함수의 일부 대기열이 발생해야합니다. notificationSlideUp() 함수가 이미 객체의 slideUp() 및 delay()를 트리거했기 때문입니다.

지연에 대해서도 마찬가지입니다. .notification이 처음 10 초 내에 출력되지 않으면 지연 카운터가 이미 페이지로드에서 시작되었으므로 지연 타이밍이 올바르지 않습니다.

어떤 아이디어로 해결할 수 있도록 항상 효과가 있습니까?

업데이트 :

var notificationTimer; 

function notificationOutput(type, message) { 
    var note = $('.notification'); 
    note.hide(); 
    note.find('.message').html(message); 

    note.stop(true,true).slideDown(); 

    clearTimeout(notificationTimer); 
    notificationTimer = setTimeout(function() { 
     note.stop(true,true).slideUp(); 
    }, 10000); 

} 

function notificationSlideUp(slideUp) { 
    var note = $('.notification'); 

    if (slideUp) { 
     clearTimeout(notificationTimer); 
     notificationTimer = setTimeout(function() { 
      note.stop(true,true).slideUp(); 
     }, 10000); 
    } else { 
     note.stop(true,true).slideUp(); 
    } 
} 

Answer 1

불행히도, jQuery의 delay() 기능은 방법 setTimeout()이 clearTimeout()으로 수행 지연을 취소하기 위해 어떤 방법을 제공하지 않습니다. delay()을 setTimeout()으로 바꾸고 대기중인 애니메이션을 즉시 취소/트리거해야하는 경우를 대비하여 clearTimeout()에 조건을 쓰는 것이 좋습니다.

Answer 2

http://api.jquery.com/delay/

.delay() 메소드는 대기 jQuery를 효과 사이의 지연에 대한 최선이다. 제한적이기 때문에 예를 들어 지연을 취소 할 방법을 제공하지 않습니다. -delay()은 특정 사용에 더 적합 할 수있는 JavaScript의 기본 setTimeout 기능을 대신하지 않습니다. 사례.

하지만 다음과 같은 '힌트'를 사용하여 지연을 아무것도 바꿀 수없는 애니메이션으로 바꿀 수 있습니다. 예를 들어 .animate({opacity:1},timing)