Директива wire:click.debounce

Директива wire:click.debounce является модификатором директивы wire:click. Она ограничивает частоту вызова метода компонента при клике, добавляя задержку перед отправкой запроса. Если пользователь делает несколько кликов подряд, метод будет вызван только один раз - по истечении указанного времени после последнего клика. В значение модификатору передается время задержки в миллисекундах.

Синтаксис

<button wire:click.debounce.500="methodName">
	text
</button>

Время задержки указывается после точки, например, .500 означает 500 миллисекунд. Если время не указано, используется значение по умолчанию - 150 миллисекунд.

Пример

Давайте создадим компонент, в котором при клике на кнопку выводится сообщение. Для наглядности добавим задержку в 1 секунду:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ClickDebounce extends Component
	{
		public $message = '';
		
		public function showMessage()
		{
			$this->message = 'Clicked!';
		}
		
		public function render()
		{
			return view('livewire.click-debounce');
		}
	}
?>

<div>
	<button wire:click.debounce.1000="showMessage">
		Click me
	</button>
	<p>{{ $message }}</p>
</div>

Результат выполнения кода:

<div>
	<button>
		Click me
	</button>
	<p>Clicked!</p>
</div>

Если кликнуть по кнопке несколько раз подряд, сообщение появится только через секунду после последнего клика.

Пример

Теперь добавим счетчик кликов и увеличим его с задержкой в 300 миллисекунд:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CounterDebounce extends Component
	{
		public $count = 0;
		
		public function increment()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.counter-debounce');
		}
	}
?>

<div>
	<button wire:click.debounce.300="increment">
		Increment
	</button>
	<span>{{ $count }}</span>
</div>

Результат выполнения кода:

<div>
	<button>
		Increment
	</button>
	<span>1</span>
</div>

При быстрых повторных кликах счетчик увеличится только один раз через 300 миллисекунд после последнего нажатия.

Смотрите также

директиву wire:click.throttle,
которая ограничивает частоту вызовов, но пропускает первый клик
директиву wire:click.delay,
которая добавляет задержку перед каждым вызовом метода
директиву wire:click.prevent,
которая отменяет действие браузера по умолчанию
директиву wire:model.debounce,
которая применяет debounce к изменениям поля ввода