Delaying functions from the component

#1

Hello all,
I am new to Livewire (only been learning for a few days) and new here.

I was just hoping someone may be able to point me in the right direction in regards to delaying the call of a function within the Livewire component.

I have a button, the text is set from the component.

public $text;

when the component mounts I set that variable to $this->text = ‘Click Me’;

It renders absolutely fine within the view.

When I click the button I set the text variable to $this->text ‘Clicked’;

Again this is all working as intended.

However what I want to achieve here is after the button is clicked, I want to immediately change the text to ‘Clicked’ and then 5 seconds later I want the text to be set back to ‘Click Me’.

In JavaScript I can just delay the setTimeout(); and I am essentially looking for an equivalent here.

I can’t use sleep() on the server side as i’m sure you are aware the effects are not desired.

Any help or nudge in the right direction will be muchly appreciated, thank you

#2

You can use JS as well…when clicked the button call a function that change the $text value and dispatch an event that captured by JS delay for the required time and emit to that livewire component to set the text value…it’s simple, and in blade always checking for the changes

1 Like
#3

Thanks for taking the time to reply, I did end up going down this route after learning about emitting livewire events to JS and vice versa.

Again, thank you

1 Like