Question

我在js代码的一部分中遇到了一些奇怪的行为。

我有一些通知显示在页面顶部的栏中，然后在一段时间后消失。我用了一个简单的setTimeout()来实现这个目标。

有时，当页面加载时，通知将显示为特定网址查询字符串的结果，但是当用户点击按钮时需要显示新通知。我希望旧的消失，新的消失。我正在使用变量来保留对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/因为它有一些不错的方法来检查视口中是否有元素可见。

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

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不是实际的。尝试使用$('#notification-bar').stop(true, true);来停止致动动画，因为您可以致电window.clearTimeout(Notification.timeout);。也许使用$('#notification-bar').stop(true, false);会更好，因此甚至不会调用“旧的”setTimeout。

单击时删除setTimeout

1 个答案: