Can you stop a setInterval() after it fires 1 time or a certain condition is met?

Hi there guys,

I am using a setInterval( function , 5000) , which fires every 5 seconds checking if certain conditions inside the function are met.

Once those conditios are met set Interval keeps going and calls the function , that’s normal.

But I want to know if there is some way I can stop setInterval or ,at least, stop calling the function inside it ?

I found out there is a method called clearInterval , but how sould I use it to clean the setInterval only after the function in the setinterval has fired ??

You mention a breaking condition, that would be where to insert the clearInterval.

Yes , that I understand . But …

1 - Would I set that coindition inside the setInterval function ??

2 - Or would I make a new function for clearInterval ? If so , wouldnt the clearInterval function have to be called several times until the condition to stop the setInterval is met ??

There is an awful lot of code in there, much of which could be abstracted away.

That aside, please post the raw code in a reply to aid in that process.

Here is another option that you could consider instead of using timers. If you are checking for a winning condition in a board-game you may find it more efficient to do this after every move in the game instead of setting up an interval. It will likely simplify the code and give a quicker winning alert to the players.

1 Like

:joy: :joy::joy:

Yes , I imagine this code must look very bad for experienced developers. I think this piece of code below is enough to understand what I’am trying to do ?

But if you want to see the all thing , here it is :

const Board = {
  square1: document.getElementById("quadrado1"),
  square2: document.getElementById("quadrado2"),
  square3: document.getElementById("quadrado3"),
  square4: document.getElementById("quadrado4"),
  square5: document.getElementById("quadrado5"),
  square6: document.getElementById("quadrado6"),
  square7: document.getElementById("quadrado7"),
  square8: document.getElementById("quadrado8"),
  square9: document.getElementById("quadrado9"),

SquaresArray = [Board.square1,Board.square2,Board.square3,Board.square4,Board.square5,Board.square6,Board.square7,Board.square8,Board.square9];

   let CheckingWinner = setInterval(function CheckWinner(){SquaresArray.some(element => {
   if (Board.square1.innerText == "X" && Board.square2.innerText == "X" && Board.square3.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square1.innerText == "O" && Board.square2.innerText == "O" && Board.square3.innerText == "O")
   return console.log("Player 2 has won the match");
   else if (Board.square4.innerText == "X" && Board.square5.innerText == "X" && Board.square6.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square4.innerText == "O" && Board.square5.innerText == "O" && Board.square6.innerText == "O")
   return console.log("Player 2 has won the match");
   else if (Board.square7.innerText == "X" && Board.square8.innerText == "X" && Board.square9.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square7.innerText == "O" && Board.square8.innerText == "O" && Board.square9.innerText == "O")
   return console.log("Player 2 has won the match");
})}, 5000)

<div class="tabuleiro" id="quadrados">

That’s your board. All the squares are children of this parent element. That’s where to put the event listener, on this one object. All clicks will bubble up to the parent, and the resulting event object will have a target attribute. This gives us the ability to delegate every event from a single listener.

Now the challenge is to find a checking algorithm. For now I would set aside the time interval and focus on the event handler. You have enough structure in place, now to fine tune it and rid one’s program of all that verbose code.

Consider a companion array, three by three that takes values 3 for O and 4 for X. Now we only need an algo to get the sums in eight directions. Any that equal 9 or 12 will trigger the end of the timer interval, once that is in play. For now it will remove the event listener from the board and announce the winner. The listener can be re-attached when the game resumes with a new set up.

1 Like

I just looked quickly on the code and it seems like you are just checking 3 of the rows for either “XXX” or “OOO”. It is a challenge to create an effective function to also check the other (vertical and diagonal I assumed) options (especially without writing a lot of code). You can take a look at how that is implemented in the attached link if you like. This tutorial uses the React library but even if you don’t know React you could scroll down to ‘Declaring a winner’ and see how they solved that particular issue if you would like to try a different solution.

React Tic-Tac-Toe Tutorial

1 Like

That approach addresses the eight vectors without complex logic. The old, ‘let an object do the heavy lifting’ trick. Even better than the 3/4 logic above.

1 Like

Well, reading your comments I do come upon some conclusions :

1 - Doing this game is a challenging :sweat:

1- Arrays are a lot more usefull then what I originally thought.

2 - I need to change the way the TURN system of the game is working on. ( turn changes when the board is clicked upon)

3 - Promises and asyncs probably would have helped, because I’am having troubles trying to use the output of functions in another functions.

1 Like