Question

我有一个吐司通知系统，该系统会在淡出之前显示通知10秒钟。我想添加一项功能，该功能可以在悬停通知时暂停倒计时，并在不再悬停时恢复倒计时。

我正在尝试使用setInterval()函数来执行此操作，但是我不确定如何稍后暂停（清除）此间隔。我知道我可以将setInterval绑定到变量，但是这些通知是动态创建的，因此无法将它们绑定到单个变量。

在下面的示例中，我将setInterval()存储在名为???的变量中，理想情况下，我将使用jQuery元素（$(this)）作为变量绑定此间隔，因此它始终是唯一的，并且可以通过将clearInterval()函数传递相同的jQuery元素轻松清除。

有没有办法做到这一点，或者我打算建立这个系统都错了吗？

// Start notification countdown
$.countDownNotification = function(notification) {
    // IMPORTANT: Store the setInterval in a element-specific variable?
    var ??? = setInterval( function() {
        // Counts down from remaining seconds
        var remaining = notification.attr('data-timer') + 1 - 1;

        // Stores remaining seconds in data-attribute
        notification.attr('data-timer', remaining);

        // Remove notification when timer is on 0
        if ( remaining == 0 ) {
            notification.remove();
        }
    }, 1000);
}

// Pause on hover
$('.notification').on('mouseenter', function(e) {
    // IMPORTANT: Clear the elemnt-specific interval
    clearInterval(???);
});

// Resume when hover ends
$('.notification').on('mouseleave', function(e) {
    var notification = $(this)

    $.countDownNotification(notification);
});

Answer 1

考虑声明一个全局变量。

// Start notification countdown
$.countDownNotification = function(notification) {
    // IMPORTANT: Store the setInterval in a element-specific variable?
    timer = setInterval( function() {
        // Counts down from 10 and stores new value in data-attribute
        notification.attr('data-timer', notification.attr('data-timer') - 1);
    }, 1000);

    // Remove notification when timer is on 0
    if ( newRemaining == 0 ) {
        notification.remove();
    }
}

// `false` means no timer has been set
var timer = false;

// Pause on hover
$('.notification').on('mouseenter', function(e) {
    // IMPORTANT: Clear the elemnt-specific interval
    clearInterval( timer );
});

// Resume when hover ends
$('.notification').on('mouseleave', function(e) {
    var notification = $(this)

    $.countDownNotification(notification);
});

不设置全局对象的另一种方法是通过setInterval()返回.countDownNotification。

// Start notification countdown
$.countDownNotification = function(notification) {
    // IMPORTANT: Store the setInterval in a element-specific variable?
    var id = setInterval( function() {
        // Counts down from 10 and stores new value in data-attribute
        notification.attr('data-timer', notification.attr('data-timer') - 1);
    }, 1000);

    // Remove notification when timer is on 0
    if ( newRemaining == 0 ) {
        notification.remove();
    }

    return id;

}

( function() {

    // `false` means no timer has been set
    var timer = false;

    // Pause on hover
    $('.notification').on('mouseenter', function(e) {
        // IMPORTANT: Clear the elemnt-specific interval
        clearInterval( timer );
    });

    // Resume when hover ends
    $('.notification').on('mouseleave', function(e) {
        var notification = $(this)

        timer = $.countDownNotification(notification);
    });

})();

Answer 2

您可以通过.data()在通知上存储间隔。

notification.data('int', setInterval(...

然后，在事件回调中，您可以通过以下方式引用间隔：

$(this).data('int')

另外，请注意+1-1并没有任何意义。

将setInterval（）绑定到jQuery元素

2 个答案: