Async Await - Waiting for image.hide fade out duration to complete...

Ask the community
,
1

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.

2

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);
3

Hi Anthony, many thanks for this, this is great info and I think you’ve solved it for me with the option to put all the images in the single hide line, I didn’t know you could do this!

I didn’t explain the full code, which might explain why I need it to wait to complete the fade before continuing. It’s a form a user completes, their data is then queried in a data-query and the results return to them in the form of some chart images. So I’ve several place-holder images on the page. Initially these are simply big graphic question marks.

When they click the submit button, the code changes these image sources to an image of “Please wait…”. for while it’s processing their data. Once the data query completes, it fades out the “Please wait…” images, hides them, then changes the image source to a chart of their results, then fades it back in again. What’s happening is that while it’s fading out the “Please wait…” images, the data query completes (it’s much much quicker in Live than preview!) and changes the image source to their results, before the initial fade out is completed. So I needed the initial fade out to complete, before anything else happens! Thanks to your advice, I’ll be able to put a single Await as:

Await $w ( " #image1 , #image2 , #image3 " ). hide ( “fade” , fadeOptions );

And now it’ll fade them out, before changing the source too soon! Currently, it shows their results, then fades them out straight away! Only noticed this in Live as it’s so much quicker, in preview the query too longer so the timing works, but only by chance! Thanks again for you help, you’ve solved it! Very much appreciate it! Take care,

Cheers,

Andy.

4

@andydavidson1965
So you want to change the image, then fade out, when its done you want to change image again and then fade it in again?

So first you need an await function while changing the images.
Then u start fading them out also with an await function
Then change the image again also with an await function
And then start fading them in with an await function
The previous functiin always have to finish before the next one starts.

5

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.