Estoy intentando setInterval en js para escribir 'está escribiendo' cuando alguien escribe, pero solo funciona bien la primera vez, ¡después de eso cada vez lleva menos tiempo hacer la función!
var personTyping = document.getElementById('typingArea'); var isTypingPlace = document.getElementById('isTypingPlace'); personTyping.addEventListener('keypress', () => { isTypingPlace.innerHTML = "درحال نوشتن..."; }) personTyping.addEventListener('keyup', () => { setInterval(() => { isTypingPlace.innerHTML = null; }, 1000) }) <html lang="en" dir="rtl"> <div id="typingArea"><input type="text"></div> <p id="isTypingPlace"></p>Cada vez que cree un intervalo con setInterval() , seguirá activando la devolución de llamada para siempre hasta que elimine el intervalo nuevamente. Cuando se llama a su detector de eventos, crea nuevos intervalos que continuarán activándose. Por lo tanto, debe eliminar los intervalos antiguos con clearInterval() antes de crear uno nuevo.
var personTyping = document.getElementById('typingArea'); var isTypingPlace = document.getElementById('isTypingPlace'); personTyping.addEventListener('keypress', () => { isTypingPlace.innerHTML = "درحال نوشتن..."; }) let interval = null personTyping.addEventListener('keyup', () => { if (interval) clearInterval(interval); interval = setInterval(() => { isTypingPlace.innerHTML = null; }, 1000) }) <html lang="en" dir="rtl"> <div id="typingArea"><input type="text"></div> <p id="isTypingPlace"></p>Creo que hay un gran problema con la lógica. Desea mostrar el resultado durante 1 segundo y luego borrar el contenido. Pero cada evento keyup , está creando un nuevo intervalo que creo que no es el comportamiento previsto. En su lugar, puede usar setTimeout y puede usar clearTimeout , que actúa como un efecto de rebote durante 1 segundo.
var personTyping = document.getElementById('typingArea'); var isTypingPlace = document.getElementById('isTypingPlace'); let timeoutRef; personTyping.addEventListener('keypress', () => { isTypingPlace.innerHTML = "درحال نوشتن..."; }) personTyping.addEventListener('keyup', () => { clearTimeout(timeoutRef) timeoutRef = setTimeout(() => { isTypingPlace.innerHTML = null; console.log('Content cleared'); }, 1000) }) <div id="typingArea"><input type="text"></div> <p id="isTypingPlace"></p>Creo que quieres usar setTimeout en lugar de setInterval
var personTyping = document.getElementById('typingArea'); var isTypingPlace = document.getElementById('isTypingPlace'); personTyping.addEventListener('keypress', () => { isTypingPlace.innerHTML = "درحال نوشتن..."; }) personTyping.addEventListener('keyup', () => { setTimeout(() => { isTypingPlace.innerHTML = null; }, 1000) }) <html lang="en" dir="rtl"> <div id="typingArea"><input type="text"></div> <p id="isTypingPlace"></p>