Wix Velo Show and Hide Lag

Ask the community
,
1

Hi this is my website:
https://kevin806604.wixsite.com/website/%E9%AB%98%E4%B8%AD%E8%A1%A5%E4%B9%A0
code:

export function box9_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
 if($w("#text29").hidden == true){
 $w("#text30").hide();
 $w("#image7").hide();
 $w("#text29").show();
 } else {
 $w("#text29").hide();
 $w("#text30").show();
 $w("#image7").show();
 }
}

I am trying to alternate between three texts so one click would hide and show the other ones. As you can see the show and hide is not instant and also sometimes one text shows and hides before the other one. Does anyone know why this is happening?

2

Hi Johnathan :raised_hand_with_fingers_splayed:

The show( ) and hide( ) methods are not instant because they’re promises, you can learn about Promises here.

To prevent one from showing before the others are hidden, you need to wait for the first items to be done processing, then show the others, there are 2 ways to achieve it.

A) Async/Await

$w('#toggle').onClick(async () => {
    if ($w("#text29").hidden) {
        await $w("#text30, #image7").hide();
        $w("#text29").show();
    } else {
        await $w("#text29").hide();
        $w("#text30, #image7").show()
    }
})

Learn about async/await here.

B) Promise.then( ) Method

$w('#toggle').onClick(() => {
    if ($w("#text29").hidden) {
        $w("#text30, #image7").hide().then(() => $w("#text29").show());        
    } else {
        $w("#text29").hide().then(() => {
            $w("#text30, #image7").show();
        })        
    }
})

Learn more about the then( ) method here.

Hope this answer helps you and others struggling with promises.
Ahmad