删除设置单击超时

Removing setTimeout on click

本文关键字：超时 单击 设置 删除      更新时间：2023-09-26

我在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);的动作动画。也许使用$('#notification-bar').stop(true, false);会更好，所以"旧"setTimeout甚至不会被调用。

相关文章：