javascript - 单击时删除 setTimeout

Question

我的部分 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/因为它有一些很好的方法来检查元素在视口(viewport)中是否可见。

谁能告诉我我的错误在哪里？

Answer 1

我认为错误 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 不是 actuell。尝试 $('#notification-bar').stop(true, true); 在调用 window.clearTimeout(Notification.timeout); 之前停止当前动画.也许使用 $('#notification-bar').stop(true, false); 会更好，这样“旧的”setTimeout 甚至不会被调用。