Unusual behavior from setTimeout()

1

I’m trying to come up with a way to run an automated click after about 1.5 seconds. I would paste my code, but it’s a fairly good size project and I don’t wanna push anybody away from my question with complex code. However if you wanna dive into it here’s the github (Please be nice with my code, haven’t refactored at all yet)

https://github.com/iraqwarvet31/card-game.git

So I will post a snippet of what exactly I’m trying to do. I’m trying to use the HTML DOM click() Method inside of a setTimeout() like this:

let element = document.getElementsByClassName('5 card__face card__face--front')[0]
setTimeout(() => element.click(), 1000)

What it’s supposed to do is when the player matches 2 cards, it waits 1.5 seconds and then flips the cards back over face down. At first it seems like it works, it activates in 1.5 seconds, but causes weird behavior. It runs infinitely and does not stop. Upon research I found this is because I’m calling another function inside of setTimeout().

So I’m not really sure how to get around this. I’ve already tried setting a boolean variable to false and putting the setTimeout in a conditional statement, but still runs infinitely.

2

I’m not really sure why this wouldn’t wait 1 second and then run setTimeout. That fact that you are running element.click inside that anonymous function shouldn’t matter because the anonymous function should only be run once. Technically setTimeout just needs a function so:

setTimeout(element.click, 1000)

Should do the same thing. If you’d done:

setTimeout(element.click(), 1000)

then I’d expect the behavior you are describing.

To debug this, I might do:

console.log('about to set timeout')
setTimeout(() => {
  console.log('executing timeout')
  element.click()
},5000)
console.log('done setting timeout')

This might help determine if you are setting it multiple times or whatnot. I set it to 5 seconds to make sure we aren’t just missing something.

1 Like
3

Isn’t it because you have an onClick handler on the same element that you are auto-clicking so the toggleClass method is being re-run (edit: point being, the if condition has not changed so it called the .click again).

Do you need an auto click method anyway, are you not wanting to flip the cards back and isn’t that just a class that needs to be toggled?

I didn’t really look much at the code but for a React app you seem to be doing a lot of plain JS DOM stuff. That is not really how React works best.

I guess I would have to look at the code some more.

1 Like
4

Thanks for the suggestion lasjorg. I was so hungup on getting the auto-click to work I forgot about toggling the is-flipped class. I was able to get do this by toggling the class. Thanks!

5

Hello Kevin I tried both. The first one didn’t run at all. The second was what I had, still running infinitely. I was able to take lasjorg’s suggestion and just toggle the is-flipped class. Thank you for your suggestions though!!!

setTimeout(element.click, 1000)
setTimeout(element.click(), 1000)

6

Well, the second one was a suggestion of what not to do. But I’m glad you figured it out.

1 Like