Jquery: скрывать элемент, если не происходит никаких событий?

Question

[Михаил]

Для саморазвития. Как реализовать надпись "The user is typing..." так, чтобы надпись исчезала через 3 сек после того как юзер перестал писать.

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

setTimeout

$('#m').keydown(function() {
            setTimeout("$('#typing_message').css('display', 'block')", 250);
});
$('#m').keyup(function() { setTimeout("$('#typing_message').css('display', 'none')", 1000); });

А хочется, чтобы пока юзер набирает сообщение - надпись была. Перестал - 3 сек прошло и надпись пропала.

Comments

[Павел]

можно код на jsfidle?

Answer 1

[Александр]

Как-то так (код не тестировал, но должен работать):

var typingId = 0;
$('#m').keydown(function() {
    $('#typing_message').show();

    clearTimeout(typingId);
    typingId = setTimeout(function() {
        $('#typing_message').hide();
    }, 3000);
});

При каждом нажатии на кнопку отображается надпись и запускается новый таймер на 3 сек, который спрячет надпись, при это ранее запущенный таймер деактивируется.

Comments

[Михаил]

Большое спасибо. Потестил, все как надо.
Одна проблема, что после отправки сообщения, надпись висит еще 3 секунды.

То есть нужно обнулять таймер если инпут пустой?

if ($('#m').val() == '') {
   typingId = 0;
   $('#typing_message').hide();
}

[Александр]

Михаил, лучше делать это в событии отправки сообщения

[Михаил]

Александр, понял-принял. Спасибо еще раз