Multi-state pause on hover?

Ask the community
,
1

I have a multi-state box on my site that changes to a new state with time function every six seconds. The state can also be changed at the click of a button.

I would like to pause the time function using a hover event but I’m a little out of my depth on this one.

Is there a pause function for multi-state boxes or is there something I’m missing. Any help greatly appreciated and code below.

$w . onReady ( function () {

**var**  states  = [ 'state1' ,  'state2' ,  'state3' ,  'state4' ,  'state5' ,]; 
**var**  stateNumber  =  0 ; 

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

$w ( “#next1” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state2” );
} );
$w ( “#next2” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state3” );
} );
$w ( “#next3” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state4” );
} );
$w ( “#next4” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state5” );
} );
$w ( “#next5” ). onClick (() => {
$w ( ‘#multiStateBox1’ ). changeState ( “state1” );
} );
});

2

So, one thing that needs to happen is you need to save the timeoutID, and then make the onMouseIn and onMouseOut functions. Something like this

$w.onReady(function(){
var states=['state1', 'state2', 'state3', 'state4', 'state5',];

var stateNumber=0;

var timeoutID;
function slideShow({
$w('#multiStateBox1').changeState(states[stateNumber]);
if(stateNumber<states.length-1{ 
    stateNumber++;
}
else{
    stateNumber=0;}
    timeoutID = setTimeout(slideShow,6000);
}
slideShow();
$w("#next1").onClick(()=>{$w('#multiStateBox1').changeState("state2");});
$w("#next2").onClick(()=>{$w('#multiStateBox1').changeState("state3");});
$w("#next3").onClick(()=>{$w('#multiStateBox1').changeState("state4");});
$w("#next4").onClick(()=>{$w('#multiStateBox1').changeState("state5");});
$w("#next5").onClick(()=>{$w('#multiStateBox1').changeState("state1");});

$w('#multiStateBox1').onMouseIn(()=>{
    clearTimeout(timeoutID)
})

$w('#multiStateBox1').onMouseOut(()=>{
    slideshow()
})

});

I marked the changes in blue

3

Thank you Simen, that works perfectly.

So just so I can understand it, the clear function acts as a cancel to the timer on hover then mouse out calls back the slideshow function?

4

@danfleming Correct.