Auto reverse show/hide

Ask the community
,
1

I want to hide a box and then have it shown again after a period of time. I’ve used set Timeout to hide the box after a couple of seconds, but cannot work out how to automatically reverse the hide status back to show after after another couple of seconds. Any advice?

Here is what I have so far:

export function box45_viewportEnter(event) {
 
    setTimeout(function () {
        $w("#box45").hide();
    }, 2000);
}
2

What exactly are you trying to accomplish. Under what condition do you want to show the box?

3

I want to have the box repeatedly hide and show (with a 2sec delay between each) when entering the viewport. I researched and found that the setInterval method would be a possible solution, but I couldn’t work out how to make the hide/show happen first.

4

Well, here’s a quick and dirty attempt:

let timer;

export function box45_viewportEnter(event) {
   timer = setInterval(function(){
      if($w("#box45").hidden === true) {
         $w("#box45").show();
      }
      else {
         $w("#box45").hide();
      }
   }, 2000);
}

export function box45_viewportLeave(event) {
    clearInterval(timer);
}

The above code is not tested. But the idea is that it checks current hide/show status of #box45, and then does the opposite. That is, it toggles hide/show.

I hope this helps.

5

The code does not work. On viewport enter, the box is hidden as the code executes but it does not show again, just remains hidden.

6

Can’t say why it’s not working for you, but I just tried out the code myself and it works great. You must have something else going on that’s causing the problem.

7

@yisrael-wix I don’t know either. Thanks for your help anyway. Much appreciated.