Second setTimeout not executing

Ask the community
,
1

Hi Wix Coders,

I’m having a silly issue, probably bad coding practice?? I have two setTimeout functions, one running after the other (which I think should be possible by this example ).

The first will show an element after the set delay period and the other will hide it once the duration is reached.

The first timeout executes fine, but the second never seems to run. I’m using timeout to avoid the shorter “delay” restrictions on EffectOptions

Any thoughts as to why my second timeout isn’t completing? I don’t believe setInterval to be appropriate in this situation as they must perform separate functions only once.

The element #notificationCTA is set to hidden on load.

const delay = 5000;
const duration = 10000;

setTimeout(function(){ $w('#notificationCTA').show("slide",{"duration":2000, "delay":1000, "direction":"top"}); }, delay);
setTimeout(function(){ $w('#notificationCTA').hide("slide",{"duration":2000, "delay":1000, "direction":"top"}); }, duration);

Any help, as always, is very appreciated.

/Jamie

2

After some testing I think this might have to do with the animation?

If I comment out the first setTimeout and make it so that the element is not hidden on load, the second setTimout (.show) executes fine.

If I change the code to;

$w('#notificationCTA').show();
setTimeout(function(){ $w('#notificationCTA').hide("slide",{"duration":2000, "delay":1000, "direction":"top"}); }, duration);

the second timeout doesn’t fire still. Could it be to do with the animation?

3

I seem to have resolved this issue by removing the “duration” effect option. Not sure why?

4

Note from the OG src documentation :

Note: This method may cause performance issues, especially when used on many elements. If you’re encountering such issues, use performance testing tools to determine whether this method is causing them.

You should be able to get it to working by using the following, however:

const delay = 5000;
const duration = 10000;

Promise.all([
(() => { setTimeout(function() { $w('#notificationCTA').show("slide",{"duration":2000, "delay":1000, "direction":"top"}); }, delay); })(),
(() => { setTimeout(function(){ $w('#notificationCTA').hide("slide",{"duration":2000, "delay":1000, "direction":"top"}); }, duration); })(),
]);
5

@skmedia Thanks David, i’ll give it a go, Cheers!