> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/form/.debounce.md).

# .debounce()

`debounce()` delays a function until activity has stopped for a short time.

It is perfect for search inputs.

#### Syntax

```javascript
debounce(callback, delay);
```

#### Parameters

* `callback` → function to delay
* `delay` → time in milliseconds

#### Output

```javascript
Function
```

#### Example

```javascript
$('#search').onInput(debounce(function () {
  console.log(this.val());
}, 300));
```

### Use cases

Use `debounce()` to:

* Search after a user stops typing.
* Validate a field without checking every keystroke.
* Save a draft after editing pauses.

### More examples

Check whether a username is available:

```javascript
$('#username').onInput(debounce(function() {
  checkUsername(this.val());
}, 400));
```

Save a draft after the user stops editing:

```javascript
$('#message').onInput(debounce(function() {
  saveDraft(this.val());
}, 1000));
```

{% hint style="info" %}
Each new input event restarts the delay. The callback runs after the final event.
{% endhint %}

#### Key Takeaway

> `debounce()` prevents a function from running too often.