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

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

Синтаксис

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

<button wire:click.throttle.2000ms="methodName">
	text
</button>

Пример

Давайте создадим компонент, в котором по клику на кнопку увеличивается счетчик $num. Ограничим вызов метода inc интервалом в 1 секунду:

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

<button wire:click.throttle.1000ms="inc">
	+
</button>
<span>{{ $num }}</span>

В этом примере метод inc будет вызван не чаще одного раза в секунду, даже если пользователь будет часто кликать по кнопке.

Пример

Давайте передадим в метод параметр и используем стандартное значение задержки 2000 мс. Обратите внимание, что в Livewire можно указать задержку как с суффиксом ms, так и без него:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function inc($step)
		{
			$this->num += $step;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<button wire:click.throttle.2000="inc(2)">
	+2 (throttled 2s)
</button>
<span>{{ $num }}</span>

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

Пример

Используем wire:click.throttle для ограничения отправки данных на сервер. Пусть метод сохраняет текст из поля ввода, но не чаще раза в 500 мс:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Saver extends Component
	{
		public $text = '';
		public $saved = [];
		
		public function save()
		{
			$this->saved[] = $this->text;
		}
		
		public function render()
		{
			return view('livewire.saver');
		}
	}
?>

<input type="text" wire:model="text">
<button wire:click.throttle.500ms="save">
	Save
</button>
<ul>
	@foreach ($saved as $item)
		<li>{{ $item }}</li>
	@endforeach
</ul>

В этом примере даже при множественных кликах по кнопке метод save будет вызываться максимум 2 раза в секунду.

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

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