Trying to debounce a click event in a livewire component

I have a component that enables a user to add a score for a player. The input is tied to a model and I've added buttons either side to increment or decrement the score value.

Once the score is updated it calls a couple of methods to calculate points and update a leaderboard, the score entry is also stored in a database.

I'm trying to debounce the click event so that a user could click a couple of times to increase/decrease the score and only then store to the database and update the leaderboard.

I've looked up creating a custom function but failing to get it to work and scrapped that and also now trying to use the debouce modifier in Alpine.js but that stops all the functionality of the button.

Here's the buttons and related input:

<button @click="score_{{$player->id}}_{{$x}} = Math.max(0, score_{{$player->id}}_{{$x}} - 1);
               $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}};
               @this.call('updateScore', {{$x}}, {{$player->id}}, score_{{$player->id}}_{{$x}})"
               class=" h-12 flex justify-center items-center w-10 h-10 rounded-l-lg
               text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
              		<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M20 12H4"></path>
                    </svg>
</button>
		<input type="number" name="score[{{$player->id}}][{{$x}}]"
                    x-ref="input_{{$player->id}}_{{$x}}"
                    x-model="score_{{$player->id}}_{{$x}}"
                    wire:model="scores.{{$player->id}}.{{$x}}.score"
                    wire:change="updateScore({{$x}}, {{$player->id}}, $event.target.value)"
                    min="0" max="9"
                    wire:blur="storeScore({{$x}}, {{$player->id}})"
                    class="w-20 h-12 border border-gray-300 text-3xl z-50 text-zinc-900" />
		<button @click="score_{{$player->id}}_{{$x}} = Math.min(9, score_{{$player->id}}_{{$x}} + 1);
                       $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}};
                       @this.call('updateScore', {{$x}}, {{$player->id}}, score_{{$player->id}}_{{$x}})"
                       class=" h-12 flex justify-center items-center w-10 h-10 rounded-r-lg
                                    text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
                       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                       		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M12 6v12M6 12h12"></path>
                       </svg>
		</button>

HOw can I best apply a debounce to the call to updateScore method?

LaryAI

1 year ago

Best Answer

Level 58

To debounce the click event in your Livewire component, you can use a combination of Alpine.js and JavaScript's setTimeout function. The idea is to delay the execution of the updateScore method until the user has stopped clicking for a specified amount of time.

Here's how you can implement it:

Create a Debounce Function: First, create a debounce function in your Alpine.js component. This function will delay the execution of the updateScore method.
Modify the Click Event: Use this debounce function in your button click events.

Here's an example of how you can achieve this:

<div x-data="{
    score_{{$player->id}}_{{$x}}: 0,
    debounceTimer: null,
    debounceUpdateScore(x, playerId, score) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
            @this.call('updateScore', x, playerId, score);
        }, 300); // Adjust the debounce delay as needed
    }
}">
    <button @click="
        score_{{$player->id}}_{{$x}} = Math.max(0, score_{{$player->id}}_{{$x}} - 1);
        $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}};
        debounceUpdateScore({{$x}}, {{$player->id}}, score_{{$player->id}}_{{$x}});
    " class="h-12 flex justify-center items-center w-10 h-10 rounded-l-lg text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
        </svg>
    </button>
    <input type="number" name="score[{{$player->id}}][{{$x}}]"
           x-ref="input_{{$player->id}}_{{$x}}"
           x-model="score_{{$player->id}}_{{$x}}"
           wire:model="scores.{{$player->id}}.{{$x}}.score"
           wire:change="updateScore({{$x}}, {{$player->id}}, $event.target.value)"
           min="0" max="9"
           wire:blur="storeScore({{$x}}, {{$player->id}})"
           class="w-20 h-12 border border-gray-300 text-3xl z-50 text-zinc-900" />
    <button @click="
        score_{{$player->id}}_{{$x}} = Math.min(9, score_{{$player->id}}_{{$x}} + 1);
        $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}};
        debounceUpdateScore({{$x}}, {{$player->id}}, score_{{$player->id}}_{{$x}});
    " class="h-12 flex justify-center items-center w-10 h-10 rounded-r-lg text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path>
        </svg>
    </button>
</div>

Explanation:

debounceUpdateScore Function: This function uses setTimeout to delay the execution of the updateScore method. The clearTimeout function is used to reset the timer if the user clicks again before the delay is over.
Debounce Delay: The delay is set to 300 milliseconds in this example, but you can adjust it to suit your needs.

By using this approach, the updateScore method will only be called once the user has stopped clicking for the specified delay period, reducing the number of calls to the server and improving performance.

Please or to participate in this conversation.