CODEWITHSUNDEEP
javascript
Hamedio
Hamedio

Reputation: 117

Why setInterval only works fine at first time?

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>

Upvotes: 0

Views: 242

Answers (4)

tm243
tm243

Reputation: 109

Your keyup event listener keeps setting the innerHTML to null, every second. Instead of setInterval you might want to use setTimeout():

personTyping.addEventListener('keyup', () => {
  setTimeout(() => {
    isTypingPlace.innerHTML = null;
  }, 1000);
})

Upvotes: 0

Tobias S.
Tobias S.

Reputation: 23825

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>

Upvotes: 5

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

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>

Upvotes: 4

Sinan Yaman
Sinan Yaman

Reputation: 5937

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>

Upvotes: 1

Related Questions