代码之家 › 专栏 › 技术社区 › Swen

将setInterval()绑定到jQuery元素

setinterval jquery javascript

Swen · 技术社区 · 7 年前

我有一个Toast通知系统,它在淡出前显示10秒钟的通知。我想添加一个功能,当通知悬停时暂停倒计时以淡出,当不再悬停时恢复。

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

在下面的示例中,我存储了 集间Valk() 在名为 ??? ,我最好使用jquery元素绑定这个间隔。( $(this) )作为一个变量,所以它总是唯一的,并且可以通过将相同的jquery元素传递给 clearInterval() 功能。

有什么方法可以做到这一点吗,或者我是在构建这个系统,这一切都是错的吗?

// 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);
});

2 回复 | 直到 7 年前

Mitya 7 年前

您可以通过 .data() .

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

然后,在事件回调中,您可以通过

$(this).data('int')

另外,注+1-1没有任何意义。

mrReiha 7 年前

考虑声明全局变量。

// 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);
    });

})();