Как применять CSS свойство на протяжении определённого события?

Question

[Alex]

Создаю окно чата. И в нем есть иконка "Собеседник печатает".

Так вот, если собеседник начинает печатать, то в скрипте вызывается определённое событие. Если он продолжает печатать, это событие повторяется каждые 5 секунд.

Задача: если событие произошло и повторяется каждые 5 секунд - показывать иконку. А если в течении 5 секунд оно не произошло - спрятать иконку.

Сейчас это реализовано так: Во время первого события добавляется CSS класс на контейнер. Сохраняется время последнего события. Потом каждую секунду запускается проверка прошло ли 5 секунд после последнего события. Если да - CSS класс удаляется.

Но я уверен, что есть более простой способ (Возможно средствами самого CSS). Но какой?

Answer 1

[Lakewake]

Как-то вы от обратного пошли, сделайте проще - по приходу события (печать) ставьте соотв. блоку CSS класс (если уже не поставлен) и создавайте новый setTimeout, при это очищая старый, если грубо то примерно так:

function onTypingReceived() {
  if( !$('#typing').hasClass('typing') ) { $('#typing').addClass('typing'); } // Добавляем класс
  clearTimeout(window.typeTimer);
  window.typeTimer = setTimeout(function() {
    $('#typing').removeClass('typing'); // Убираем класс через 5 секунд
  }, 5000);
}

Answer 2

[MaxXxaM]

Одними только средствами CSS такую задачу не реализовать. Если только анимацию использовать по keyframe. Но управление классами в любом случае будет опираться на JS. Так как подразумевается работа с таймером. CSS для этого не предназначен.
На js порекомендовал бы использовать таймер с определенной задержкой. Не совсем понял смысла зачем вызывать проверку каждую секунду, если можно запустить обратный таймер с требуемой задержкой. По нажатию пользователя на клавиатуру, сбрасывать таймер и запускать заново по сохраненному идентификатору. По завершению отсчета менять класс у определенного блока. Все мне кажется довольно просто, дальше уже некуда упрощать. А с анимацией на CSS поиграться в зависимости от предпочтений.
var id = setInterval(fn, delay);