Javascript 单击时删除设置超时

我的js代码中有一些奇怪的行为

我有一些通知出现在页面顶部的一个栏中，然后在一定时间后消失。我使用了一个简单的

setTimeout（）

来实现这一点

有时，页面加载时，特定url查询字符串会显示通知，但当用户单击按钮时，需要显示新的通知。我希望旧的消失，新的出现。我正在使用一个变量来保留对

setTimeout（）

的引用，以便取消它。然而，当我尝试这样做时，我设法创建了一个循环，最终使我的chrome选项卡崩溃

我已经整理了一个JSFIDLE来说明我的问题-

在另一个通知可见时单击显示通知将使浏览器选项卡崩溃。如果在没有显示任何内容时单击它，则可以

这是我的js：

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');
});

我正在使用它，因为它有一些很好的方法来检查元素在视口中是否可见

有人能告诉我我的错误在哪里吗？

我认为错误

未捕获范围错误：超过的最大调用堆栈大小来自JSFIDLE本身，所以我无法测试它。
我知道你在那里做了什么：

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

我在代码中看到的另一个问题是，当动画运行时调用了
Notification.open
。timeout

不是actuell。尝试

$（'#通知栏'）。停止（true，true）

在调用

window.cleartimout（Notification.timeout）之前停止actuell动画。也许使用
$（“#通知栏”）更好，因此甚至不会调用“旧”setTimeout