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

Директива wire:model.throttle является модификатором директивы wire:model. Она ограничивает частоту отправки запросов на сервер при изменении значения поля ввода. По умолчанию wire:model отправляет запрос при каждом событии ввода (input), что может создавать излишнюю нагрузку при интенсивном наборе текста. Модификатор throttle позволяет задать минимальный интервал между обновлениями, что особенно полезно для полей поиска, фильтрации или других форм с частым вводом данных.

Синтаксис

<input type="text" wire:model.throttle="propertyName">
<input type="text" wire:model.throttle.500ms="propertyName">
<input type="text" wire:model.throttle.2s="propertyName">

По умолчанию интервал составляет 150 миллисекунд. Вы можете указать свое значение в миллисекундах с суффиксом ms или в секундах с суффиксом s.

Пример

Давайте создадим поле поиска, которое будет обновлять список результатов не чаще чем раз в 500 миллисекунд:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Illuminate\Support\Collection;
	
	class Search extends Component
	{
		public $query = '';
		public $results = [];
		
		public function updatedQuery()
		{
			if (strlen($this->query) < 2) {
				$this->results = [];
				return;
			}
			
			$items = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
			$this->results = array_filter($items, function($item) {
				return str_contains($item, strtolower($this->query));
			});
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:model.throttle.500ms="query" placeholder="Search...">
	
	<ul>
		@foreach ($results as $result)
			<li>{{ $result }}</li>
		@endforeach
	</ul>
</div>

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

<input type="text" placeholder="Search..." value="a">
<ul>
	<li>apple</li>
	<li>banana</li>
	<li>date</li>
</ul>

Пример

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Comment extends Component
	{
		public $text = '';
		public $saved = false;
		
		public function updatedText()
		{
			$this->saved = false;
			
			if (strlen($this->text) > 5) {
				$this->saveComment();
			}
		}
		
		public function saveComment()
		{
			// Logic for saving comment
			$this->saved = true;
		}
		
		public function render()
		{
			return view('livewire.comment');
		}
	}
?>

<div>
	<textarea wire:model.throttle.1s="text" placeholder="Write comment..."></textarea>
	
	@if ($saved)
		<span>Comment saved!</span>
	@endif
	
	<p>Length: {{ strlen($text) }}</p>
</div>

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

<textarea placeholder="Write comment...">hello</textarea>
<span>Comment saved!</span>
<p>Length: 5</p>

Пример

Давайте используем значение по умолчанию 150 мс для поля фильтрации:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Illuminate\Support\Collection;
	
	class Filter extends Component
	{
		public $filter = '';
		public $items = [];
		
		public function updatedFilter()
		{
			$data = ['article', 'book', 'category', 'document', 'file'];
			
			if (empty($this->filter)) {
				$this->items = $data;
				return;
			}
			
			$this->items = array_filter($data, function($item) {
				return str_contains($item, strtolower($this->filter));
			});
		}
		
		public function mount()
		{
			$this->items = ['article', 'book', 'category', 'document', 'file'];
		}
		
		public function render()
		{
			return view('livewire.filter');
		}
	}
?>

<div>
	<input type="text" wire:model.throttle="filter" placeholder="Filter items...">
	
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<input type="text" placeholder="Filter items..." value="art">
<ul>
	<li>article</li>
</ul>

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

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