Привязать setInterval () к элементу jQuery - PullRequest
Новая
       7

Привязать setInterval () к элементу jQuery

0 голосов
/ 19 января 2019

У меня есть система уведомлений о тостах, которая отображает уведомление за 10 секунд до исчезновения.Я хочу добавить функцию, которая приостанавливает обратный отсчет для затухания при наведении уведомления и возобновляется, когда больше не зависает.

Я пытаюсь использовать функцию setInterval(), чтобы сделать это, но я 'Я не уверен, как позже приостановить (очистить) этот интервал.Я знаю, что могу связать setInterval с переменной, но эти уведомления создаются динамически, поэтому я не могу связать их с одной переменной.

В примере ниже я сохраняю setInterval() в переменной с именем ??? в идеале я бы связал этот интервал, используя элемент 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 ]

0 голосов
/ 19 января 2019

Вы можете сохранить интервал в уведомлении с помощью .data(). 

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

Затем в обратных вызовах событий вы можете ссылаться на интервал с помощью 

$(this).data('int')

Кроме того, note +1 - 1 не делает ничего значимого.

0 голосов
/ 19 января 2019

Рассмотрите возможность объявления глобальной переменной. 

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

})();
...