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

Ask the community
,
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