클릭시 setTimeout 제거

Question

내 js 코드 일부에서 이상한 동작이 나타납니다.

일부 알림은 페이지 상단의 막대에 표시되고 일정 시간이 지나면 사라집니다. 나는 이것을 실현하기 위해 간단한 setTimeout()을 사용했다.

가끔은 페이지가로드 될 때 특정 URL 쿼리 문자열의 결과로 알림이 표시되지만 사용자가 버튼을 클릭 할 때 새로운 URL이 표시되어야하는 경우도 있습니다. 나는 낡은 것을 사라지게하고 새 것을 나타 내기 바란다. 나는 그것을 취소하기 위해서 변수를 사용하여 setTimeout()에 대한 참조를 유지하고 있습니다. 그러나이 작업을 수행하려고 할 때 루프를 만들어 내 크롬 탭이 충돌합니다. 다른 브라우저 탭을 충돌합니다 표시되는 동안 show notification에 http://jsfiddle.net/5Nm4c/

클릭 -

나는 함께 내 문제를 설명하는 jsfiddle을 뒀다. 아무 것도 표시되지 않을 때 클릭하면 괜찮습니다. 이 요소는 뷰포트에서 볼 수 있습니다 있는지 확인하기 위해 몇 가지 좋은 방법이 있기 때문에 내가 https://github.com/ryanve/verge/을 사용하고

var Notification = { 
    // close main notification bar 
    close: function (callback) { 
     $('#notification-bar').fadeOut(250, function() { 
      // reset its position and fade it back in so it is ready to go again 
      $(this).css('top', -100).fadeIn(1); 
      // check if a callback function has been passed in 
      if (typeof callback === 'function') { 
       callback(); 
      } 
     }); 
    }, 
    // open notification bar with the appropriate css class and message 
    open: function (message) { 
     // if the notification bar is already visisble 
     if (verge.inViewport($('#notification-bar'))) { 

      // hide and then show it with the new message 
      window.clearTimeout(Notification.timeout); 
      Notification.close(Notification.open(message)); 

      return false; 
     } 

     $('#notification-bar').html(message); 

     $('#notification-bar').animate({ 
      'top': 0 
     }, 250, function() { 
      Notification.timeout = window.setTimeout(function() { Notification.close() }, 1500); 
     }); 
    }, 
    timeout: null 
} 

Notification.open('hello'); 

$('#button').click(function(e){ 
    e.preventDefault(); 
    Notification.open('link clicked'); 
}); 

:

여기 내 JS입니다.

누군가 내 오류가 어디 있는지 말해 줄 수 있습니까?

Answer 1

오류 Uncaught RangeError: Maximum call stack size exceeded은 jsfiddle 자체에서 발생한다고 생각하므로 테스트 할 수 없습니다. 난 당신이 무슨 짓을했는지 참조하십시오 애니메이션이 실행되는 동안 Notification.open가 호출 될 때

var Notification = { 
open: function (message) { 
Notification.close(Notification.open(message)); //Here you create the loop!! 
} 
} 

난 당신의 코드에서 볼 또 다른 문제는, Notification.timeout이 actuell되지 않았는지 확인합니다. $('#notification-bar').stop(true, true);을 시도하여 window.clearTimeout(Notification.timeout);이라고 부르는 액셀 애니메이션을 중지하십시오. 어쩌면 $('#notification-bar').stop(true, false);을 사용하는 것이 더 좋을 수 있으므로 "오래된"setTimeout은 호출되지 않습니다.