javascript - 点击删除setTimeout

我的js代码部分出现了一些奇怪的行为。

我有一些通知显示在页面顶部的栏中，然后在一定时间后消失。我使用了一个简单的setTimeout()来达到目的。

有时，当页面加载时，由于特定的url查询字符串而将出现一条通知，但是当用户单击按钮时，则需要显示一个新的通知。我希望旧的消失，新的消失。我正在使用变量保留对setTimeout()的引用以将其取消。但是，当我尝试执行此操作时，我设法创建了一个循环，最终使我的chrome标签崩溃了。

我整理了一个jsfiddle来说明我的问题-http://jsfiddle.net/5Nm4c/

在另一个可见的情况下单击show notification将使浏览器选项卡崩溃。如果未显示任何内容时单击它，就可以了。

这是我的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');
});

我正在使用https://github.com/ryanve/verge/，因为它有一些不错的方法来检查元素是否在视口中可见。

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

最佳答案

我认为错误Uncaught RangeError: Maximum call stack size exceeded来自jsfiddle本身，因此我无法对其进行测试。
我看到你在那儿做了什么：

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

我在您的代码中看到的另一个问题是，动画运行时在Notification.open上调用Notification.timeout时并不会起作用。在调用$('#notification-bar').stop(true, true);之前，尝试window.clearTimeout(Notification.timeout);停止actuell动画。也许使用$('#notification-bar').stop(true, false);会更好，因此甚至不会调用“旧的” setTimeout。

关于javascript - 点击删除setTimeout，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19162116/