How can I pause an infinite loop on a Multi State Box?

Ask the community
,
1

Hi Everyone,

I have run into some difficulty with a bit of code on a Multi state box within Editor X.
I am pretty new to Velo.

I have set the box up so that the different states can be accessed by clicking a button within the same section.

I have also set it up so that the states auto loop every couple of seconds.
My issue is I now want the loop to stop if a tab has been clicked or if the state is being hovered by the mouse so that users can read relevant content for as long as they need.
Is there any solution for this? Any help / guidance would be greatly appreciated

Below is the code I am running.

$w.onReady(function () {
    var states = ['UIsample', 'approvepurchases', 'automate', 'fullvisibility', 'integrations', 'staff'];
    var stateNumber = 0;

    function slideShow() {
        $w('#stateBox').changeState(states[stateNumber]);
        if (stateNumber < states.length - 1) {
            stateNumber++;
        } else {
            stateNumber = 0;
        }
        setTimeout(slideShow, 10000);
    }
    slideShow();

    $w('#firstButton').onClick(() => {
        $w('#stateBox').changeState("approvepurchases");
    });

    $w('#secondButton').onClick(() => {
        $w('#stateBox').changeState("automate");
    });

    $w('#thirdButton').onClick(() => {
        $w('#stateBox').changeState("fullvisibility");
    });

    $w('#fourthButton').onClick(() => {
        $w('#stateBox').changeState("integrations");
    });

    $w('#fifthButton').onClick(() => {
        $w('#stateBox').changeState("staff");
    });

    $w('#dpficon').onClick(() => {
        $w('#stateBox').changeState("UIsample")
    });

    $w("#stateBox").onChange((event) => {

        const buttonNames = ["first", "second", "third", "fourth", "fifth"];

        buttonNames.forEach(buttonName => {
            let button = $w("#" + buttonName + "Button"); 
            let state = buttonName + "State"; 

            if (event.target.currentState.id === state) {
                button.style.backgroundColor = blackColour; 
            } else {
                button.style.backgroundColor = blueColour; 
            }
        });
    });
});
2

You need to clear the timeout from the global object. You can do this by setting the timeout to a variable and use the clearTimeout() function to clear it after a click or hover, something like this:

1194×1116 92.7 KB

let slideTimout //create a variable to store the timeout

function slideShow() {
  $w('#stateBox').changeState(states[stateNumber])
  if (stateNumber < states.length - 1) {
    stateNumber++
  } else {
    stateNumber = 0
  }
  slideTimeout = setTimeout(slideShow, 10000) //set the timeout
}

slideShow()

$w('#firstButton').onClick(() => {
  $w('#stateBox').changeState('approvepurchases')
  clearTimeout(slideTimeout)
})

//Do this to all other buttons and hover interactions
3

Got it!

Thanks Bruno much appreciated!