need help with loop fix

I got a loop to work miraculously. now I need it to pause onclick (click a button and it stops, click again and it continues)
Idk how to get the onclick to work, so I tried the if + isvisible (and the element shows and hides when you click it)
so it kinda works but not really?
[basically making a slide show that auto plays / that you can pause (and pauses on the slide u clicked pause on) /that can unpause when you click a button // im using a multi-state box]

$w . onReady ( function () {
if ( $w ( ‘#e’ ). isVisible ){ setTimeout (() => $w ( ‘#z’ ). changeState ( ‘State3’ ) , 2000 )}
if ( $w ( ‘#e’ ). isVisible ){ setTimeout (() => $w ( ‘#z’ ). changeState ( ‘State4’ ) , 4000 )} //here it doesn’t check and doesn’t stop
if ( $w ( ‘#e’ ). isVisible ){ setTimeout (() => $w ( ‘#z’ ). changeState ( ‘state1’ ) , 5000 )} //just runs the 3 lines of code even if #e is
//hidden
setInterval (() => { if ( $w ( ‘#e’ ). isVisible ){
setTimeout (() => $w ( ‘#z’ ). changeState ( ‘State3’ ) , 2000 )}

if ( $w ( ‘#e’ ). isVisible ){
setTimeout (() => $w ( ‘#z’ ). changeState ( ‘State4’ ) , 4000 )}

**if**  ( $w ( '#e' ). isVisible ){ 
setTimeout (() =>       $w ( '#z' ). changeState ( 'state1' )    ,  5000 );}          //here it sorta works but idk why or if it does really work 
},  5000 ); 

idk how to use console log and whatnot, so if you got a solution or any useful links that’d be great. Thanks.

Maybe this can help you out…

i’m already using the settimeout… how does that help? the problem isn’t the element disappearing, the problem is, i want to stop the loop when the element disappears

I try using while but for some reason it doesn’t let the preview load at all, I’m probably not using it right but this is what I want, while element is visible state changes
$w . onReady ( function () {
while ( $w ( ‘#e’ ). isVisible ) { setTimeout (() => $w ( ‘#z’ ). changeState ( ‘State3’ ) , 10000 ) }
});

i got this to partially work
$w . onReady ( function () {
let n = 0 ;

**do**  { 
    setTimeout (() =>  $w ( '#z' ). changeState ( 'State3' ),  2000 ); 
    setTimeout (() =>  $w ( '#z' ). changeState ( 'State4' ),  4000 ); 
    n ++ 

}  **while**  ( n  >  3 ); 

but idk why the ‘change state’ lines only execute 1 time

Try this, havent fully tested, but should theoretically work.


let intervalId;

$w.onReady(function () {
  intervalId = setInterval(() => {
    if ($w('#e').isVisible) {
      setTimeout(() => $w('#z').changeState('State3'), 2000);
      setTimeout(() => $w('#z').changeState('State4'), 4000);
      setTimeout(() => $w('#z').changeState('state1'), 5000);
    }
  }, 5000);
});

$w("#button1").onClick(stopInterval);

function stopInterval() {
  clearInterval(intervalId);
}

In this version, it will toggle your function on and off, as long as you know the elementID of the element you want to click to toggle the sliding function on and off, I think this would work too


let intervalId = null;

$w.onReady(function () {
  startInterval();
});

$w("#button1").onClick(() => {
  if (intervalId === null) {
    startInterval();
  } else {
    stopInterval();
  }
});

function startInterval() {
  intervalId = setInterval(() => {
    if ($w('#e').isVisible) {
      setTimeout(() => $w('#z').changeState('State3'), 2000);
      setTimeout(() => $w('#z').changeState('State4'), 4000);
      setTimeout(() => $w('#z').changeState('state1'), 5000);
    }
  }, 5000);
}

function stopInterval() {
  clearInterval(intervalId);
  intervalId = null;
}