Как сделать мигающий фон одним цветом (уведомление)

Question

Когда пользователь получает уведомление, я проверяю его из базы данных и переводю окно уведомления в мигающее состояние. Но я хочу отменить мигание, когда пользователь нажимает, чтобы увидеть уведомление и сделать его одним цветом. Например; когда я нажимаю, фон становится красным и не меняется.

HTML:

<li id="notification-box" style="float:right; background-color:#4f5f6f;color: #1c87c9; ">
    <a href="#" data-toggle="control-sidebar"><i class="fa fa-bell-o"></i></a> 
</li> 

Javascript:

<script>
    var i = 0;
        function change() {
          var doc = document.getElementById("notification-box");
          var color = ["#ff1818","#4f5f6f"];
          doc.style.backgroundColor = color[i];
          i = (i + 1) % color.length;
        }
        setInterval(change, 750);
</script>

Я могу сделать это со следующим, но есть значок (fa-bell-o) в окне уведомлений. Когда пользователь нажимает на этот значок, естественно, он делает фон значка одним цветом, окно уведомлений продолжает мигать.

$(document).ready(function(){
    $('#notification-box').click(function(e){
        $(e.target).css('backgroundColor', 'red');
    });
});

Все предложения подходят для меня; ajax, jquery, javascript

Answer 1

Когда вы создаете функцию мерцания, используя setInterval(), вам необходимо сначала сохранить возвращаемое значение в переменной, например:

var timer = setInterval(change, 750);

, и когда вы нажимаете $('#notification-box'), вы просто нужно вызвать clearInterval() метод, чтобы остановить таймер, так что change вызов функции также останавливается как:

$('#notification-box').click(function(e){
    $(e.target).css('backgroundColor', 'red');
    clearInterval(timer);
});