How to add delay to a piece of code

Ask the community
,
1

I am making a custom mega menu that uses expand and collapse commands to open and close different strip menus for each header on the page. My problem is when switching between each header there is a flash where one collapses and another opens about 0.5 seconds later and looks terrible so is there any way to make a delay on a piece of code (my code linked below)

export function lsbutton_mouseIn(event) {
    $w('#lsdropdown').expand();
}

export function lsbutton_mouseOut(event) {
    $w('#lsdropdown').collapse();
}

export function lsdropdown_mouseIn(event) {
    $w('#lsdropdown').expand();
}

export function lsdropdown_mouseOut(event) {
    $w('#lsdropdown').collapse();
}

export function ftbutton_mouseIn(event) {
    $w('#ftdropdown').expand();
}

export function ftbutton_mouseOut(event) {
    $w('#ftdropdown').collapse();
}

export function ftdropdown_mouseIn(event) {
    $w('#ftdropdown').expand();
}

export function ftdropdown_mouseOut(event) {
    $w('#ftdropdown').collapse();
}

export function mbutton_mouseIn(event) {
    $w('#mdropdown').expand();
}

export function mbutton_mouseOut(event) {
    $w('#mdropdown').collapse();
}

export function mdropdown_mouseIn(event) {
    $w('#mdropdown').expand();
}

export function mdropdown_mouseOut(event) {
    $w('#mdropdown').collapse();
}

My aim is to add a 0.5 delay to the collapse command on the mouse out of the buttons.

Hope someone can help me, Thanks, Josh

2

You can use setTimeOut function like this

$w.onReady(function () {
 
  setTimeout(function(){
    //add your collapse or expand code here..
  }, 100);
  });
3

Some better coding technique for you…
Why better?

  1. You won’t need any connection to your properties-panel anymore.
    Connections can’t be lost anymore!
  2. Shorter CODE and much better CODE-OVERVIEW.
$w.onReady(()=> {
  $w('#lsbutton').onClick(()=>      { $w('#lsdropdown').expand();   });
  $w('#lsdropdown').onMouseOut(()=> { $w('#lsdropdown').collapse(); });
  $w('#lsdropdown').onMouseIn(()=>  { $w('#lsdropdown').expand();   });
  $w('#ftbutton').onMouseIn(()=>    { $w('#ftdropdown').expand();   });
  $w('#ftbutton').onMouseOut(()=>   { $w('#ftdropdown').collapse(); });
  $w('#ftdropdown').onMouseIn(()=>  { $w('#ftdropdown').expand();   });
  $w('#ftdropdown').onMouseOut(()=> { $w('#ftdropdown').collapse(); });
  $w('#mbutton').onMouseIn(()=>     { $w('#mdropdown').expand();    });
  $w('#mbutton').onMouseOut(()=>    { $w('#mdropdown').collapse();  });
  $w('#mdropdown').onMouseIn(()=>   { $w('#mdropdown').expand();    });
  $w('#mdropdown').onMouseOut(()=>  { $w('#mdropdown').collapse();  });
});


$w('#mdropdown').onMouseOut(()=>{
  setTimeout(()=>{$w('#mdropdown').collapse();},500);
});

And like Walter already suggested → you can use setTimeOut()-command to do some DELAY!