Hi All,
I've got a page working fine in preview, but when live the timing is out. I've realised it's due to the image.hide fade-out duration appearing to be asynchronous. In preview, it runs a little slower so the timing works, but purely by chance! In live it's quicker and the timing error shows!
I've added an await before each fade out, it works, but sequentially, but I want them all to fade out together and wait until all are done before proceeding.
Note this code is already within an asnyc function on button click.
// Fade out the waiting images... but they fade sequentially...
await $w("#image1").hide("fade", fadeOptions);
await $w("#image2").hide("fade", fadeOptions);
await $w("#image3").hide("fade", fadeOptions);
So I tried...
await {
$w("#image1").hide("fade", fadeOptions);
$w("#image2").hide("fade", fadeOptions);
$w("#image3").hide("fade", fadeOptions);
}
And it didn't like that! Is there any way to include several expressions within the single await? I'm guessing I'm going to have to create an async function, then call and wait for that?
Something like...(pseudo code!)
Async Function (FadeImages) {
$w("#image1").hide("fade", fadeOptions);
$w("#image2").hide("fade", fadeOptions);
$w("#image3").hide("fade", fadeOptions);
}
Then call that function within the button click code, something like
Await FadeImages
But is there a way to do it without having the additional function and calling it?
Thanks for any help, it's very much appreciated.
Cheers,
Andy.
Hi Kristof,
Many thanks for this, that's exactly what I needed to do. I've got it working perfectly now with combinations of await fadeout etc. It now completes each fade out before changing the source images, then also awaits for them to spin back end! Thanks very much for you help, all sorted now!
Cheers,
Andy.
Hi Andy,
I can't see anything that you're gaining by using async on this. In fact, if you don't use it, the three images will fade together as you hoped they would.
export async function FadeOut(){ let fadeOptions = { "duration": 2000, "delay": 1000 }; $w("#image1").hide("fade", fadeOptions); $w("#image2").hide("fade", fadeOptions); $w("#image3").hide("fade", fadeOptions); }
Another alternative is to put the call in one line:
$w("#image1,#image2,#image3").hide("fade", fadeOptions);