Javascript 将setInterval（）绑定到jQuery元素

我有一个toast通知系统，在淡出之前会显示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);
});

---

考虑声明一个全局变量

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

另一种不设置全局对象的方法是通过

.countDownNotification

返回

setInterval（）

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

})();

---

考虑声明一个全局变量

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

另一种不设置全局对象的方法是通过

.countDownNotification

返回

setInterval（）

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

})();

---

您可以通过

.data（）

将间隔存储在通知中

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

$(this).data('int')

---

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

您可以通过

.data（）

将间隔存储在通知中

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

$(this).data('int')

---

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

Hi，这将不起作用，因为屏幕上可以同时显示多个通知，并且有多个倒计时。如果我理解正确，使用全局

计时器
变量将同时清除所有通知。@Swen-Hey这将有效！但是使用jQuery
data
属性对我的用例来说是最方便的。尽管如此，我还是投了赞成票：）@Swen，尽管他们有相同的想法，尽管我的答案提交得更快，但我认为乌特卡诺斯在这一点上是正确的。他更应该得到那个绿色的记号。那很好。您好，这将不起作用，因为屏幕上可以同时显示多个通知，并且正在进行多个倒计时。如果我理解正确，使用全局
计时器
变量将同时清除所有通知。@Swen-Hey这将有效！但是使用jQuery
data
属性对我的用例来说是最方便的。尽管如此，我还是投了赞成票：）@Swen，尽管他们有相同的想法，尽管我的答案提交得更快，但我认为乌特卡诺斯在这一点上是正确的。他更应该得到那个绿色的记号。那很好。使用
.data（）
而不是
.attr（）
。这也将去掉
+1-1
，使其再次成为数字。使用
.data（）
而不是
.attr（）
。这也将去掉
+1-1
，使其再次成为一个数字。