Skip to main content

Debounce

The $debounce helper prevents a function from being called multiple times in quick succession, ensuring it's executed only after a specified delay. This is useful for optimizing event listeners, such as search inputs or resize events.

Installation​

To use $debounce, include the DOMY Debounce plugin via CDN:

<script src="https://unpkg.com/@domyjs/debounce@1.x.x"></script>

And then:

DOMY.createApp().plugins([debounce]).mount();

Syntax and Usage​

Basic Debounce Example​

<div d-scope="{ search: '' }">
  <p>Search: {{ search }}</p>
  <input
    type="text"
    @input="$debounce(() => search = $el.value, 300)"
    placeholder="Type to search..."
  />
</div>