Jquery: hide element if there are no events?

For self-development. How to implement the inscription "The user is typing..." so that the inscription would disappear 3 seconds after the user stopped writing.

I tried to implement setTimeout, but the engine responds while I'm writing and it turns out flashing. Some of the functions are in conflict.
setTimeout
$('#m').keydown(function() {
 setTimeout("$('#typing_message').css('display', 'block')", 250);
});
$('#m').keyup(function() { setTimeout("$('#typing_message').css('display', 'none')", 1000); });



And we want while the user is typing - the inscription was. Stopped - 3 seconds have passed, and the inscription disappeared.
March 23rd 20 at 18:53
1 answer
March 23rd 20 at 18:55
Solution
Something like (code not tested but should work):
var typingId = 0;
$('#m').keydown(function() {
$('#typing_message').show();

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


Each press of the button text and starts a new timer for 3 seconds, which will hide the inscription, when it is already started timer is deactivated.
Thank you very much. Waste, all right.
One problem that after sending the message, the words hanging for another 3 seconds.

That is, you need to reset the timer if the input is empty?
if ($('#m').val() == ") {
 typingId = 0;
$('#typing_message').hide();
}
- santiago.Dickens33 commented on March 23rd 20 at 18:58
@santiago.Dickens33, better to do it in the event of sending a message - Collin_Predovic76 commented on March 23rd 20 at 19:01
@Collin_Predovic76, understood-accepted. Thanks again - santiago.Dickens33 commented on March 23rd 20 at 19:04

Find more questions by tags HTMLjQueryJavaScript