How to make code repeat forever?

Ask the community
,
1

I have a multi-box on the homepage of my website. I have the code to make the states change from 1 through 5, 1 state every 5 seconds, but I ran into an issue. Once the. 5th state is reached, there’s no more code. There’s nothing else for it to run. I want it to keep running through state 1 to 5 FOREVER. I know I can just copy and paste the entire code over and over and over but that’s not forever it’s very possible for a user to be AFK on my website and come back to a half functional page.

How can I make my code repeat forever?

2

Can you please check to use setInterval in JavaScript? This can keep running the same code with the seconds you set

3

Okay, I tried it and it didn’t work. I’m a beginner at coding. If you would like, do you mind just quickly check my code below to see if it looks right?

To clarify the affect I’m trying to have is this.
State 1 … 5 seconds pass … State 2, etc etc

$w . onReady ( function () {
setInterval ( function (){
setTimeout ( function (){ $w ( ‘#statebox8’ ). changeState ( “state1” );}, 5000 );
setTimeout ( function (){ $w ( ‘#statebox8’ ). changeState ( “state2” );}, 5000 );
setTimeout ( function (){ $w ( ‘#statebox8’ ). changeState ( “state3” );}, 5000 );
setTimeout ( function (){ $w ( ‘#statebox8’ ). changeState ( “state4” );}, 5000 );
setTimeout ( function (){ $w ( ‘#statebox8’ ). changeState ( “state5” );}, 5000 );
}, 5000 );
});

4

You can setInterval for each state.

For example, setInternal for 5000 for slide 1. Set internal for 10000 for slide 2. Set interval for 15000 for slide 3

No need to wrap setTimeout into setInterval

5

Oh! I get it now. Thank you CCG for the help, I really appreciate it. I’ve always been more of a design guy so, I’m glad you helped me with the code side of things.

6

could you share the code? i dont think i understood what you meant.
this is my code but it is not working properly:
setInterval(() => {
// Put the code you want to run here
$w(‘#statebox8’).changeState($w(‘#State2’));
}, 3000)

setInterval(() => {
// Put the code you want to run	here 
$w('#statebox8').changeState($w('#State3'));		
}, 3000)

setInterval(() => {
// Put the code you want to run	here 
$w('#statebox8').changeState($w('#State4'));		
}, 3000)

setInterval(() => {
// Put the code you want to run	here 
$w('#statebox8').changeState($w('#State1'));		
}, 3000)
7

could anyone please help?

8

Hi there, the solution has been mentioned above and is really simple. Like someone suggested earlier, all we need to do is set timeOut for each slide and then wrap it all in setInterval. Here’s an example code :smiling_face:

EXPLANATION

  1. For simplicity, let’s assume we have a #slider with states: ‘state1’, ‘state2’ and ‘state3’ and we want them to change after 3 seconds (=3000 milliseconds).
  2. We’ll first create a function that will autoplay all 3 slides (function autoPlay()) slide by slide.
  3. Then we’ll create another function that will keep repeating the autoPlay() function in the same interval forever.

STEPS

  1. Firstly, we’re going to change state to ‘state1’ in onReady.

  2. Then, we’re going to call the autoPlay() function to auto-play all slides until it comes to the end ('state3).

  3. If each slide takes 3s, then the function will be completed within 9 seconds. So, to ensure smooth transitions, we want it to repeat itself in 12 seconds again.

To do that, we’ll just wrap the autoPlay() function in another function repeatAutoPlay() that will simply keep repeating the autoPlay() function every 12 seconds.

CODE:
$w.onReady(function () {

$w("#slider").changeState('state1');
autoPlay();
repeatAutoPlay();

});

function autoPlay() {
setTimeout(() => {
$w(“#slider”).changeState(‘state2’);
}, 3000);

setTimeout(() => {
	$w("#slider").changeState('state3');
}, 6000);

setTimeout(() => {
	$w("#slider").changeState('state1');
}, 9000);

}

function repeatAutoPlay() {
setInterval(() => {
autoPlay()
}, 12000);
}

This method worked for me. Is it working for you? :smiling_face: