I am trying setInterval in js to write 'is typing' when someone types but it only works fine at first time after that each time takes less time to do the function!
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>Everytime you create an Interval with setInterval() it will keep triggering the callback forever until you delete the interval again. When your event listener gets called you create new intervals which will all continue to trigger. So you should delete old intervals with clearInterval() before creating a new one.
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>I think that there is a major problem with the logic. You want to show the result for 1 second and then clear the content. But every keyup event, you are creating a new interval which I believe is not the intended behavior. You can use setTimeout instead, and can use clearTimeout which acts like a debounce effect for 1 sec.
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>I think you want to use setTimeout instead of 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>