---
title: "Debounce and Throttle Decorators"
description: "The @debounce and @throttle decorators wrap a component method in Async timing wrappers to reduce how often heavy handlers run on frequent events."
metadata:
  - name: keywords
    content: "jodit debounce, throttle, decorator, async, rate limiting, event handler"
---
# @debounce and @throttle

Wraps a component method in [Async.debounce](../classes/async.Async.html#debounce). This makes it possible to reduce the load on 'heavy' functions.
For example:

```typescript
import { component, watch, debounce } from 'jodit/core/decorators';
import { Dom } from 'jodit/core/dom';

@component
class UIInputSuggestion extends UIElement {
  override render(): string {
    return `<div>
      <input class="&__inputElement" type="text"/>
      <div class="&__suggestions"></div>
    </div>`; // container
  }

  state = {
    suggestions: []
  };

  // adds a listener for the container to the `input` event
  @watch(':inputElement.input')
  @debounce(100)
  protected onInputQuery(): void {
    fetch('search.php?q=' + encodeURIComponent(this.container.value)).then(
      resp => {
        this.state.suggestions = resp.json();
      }
    );
  }

  @watch('state.suggestions') // react on change `state.suggestions`
  @debounce(100)
  protected onChangeSuggestions(): void {
    Dom.detach(this.getElm('suggestions')); // clear liist

    this.state.suggestions.forEach(item => {
      const elm = this.jodit.ci.div();
      elm.innerText = item.title;
      this.getElm('suggestions').appendChild(div);
    });
  }
}
```


### debounce()

**debounce**\<`V`\>(`timeout?`, `firstCallImmediately?`, `method?`): [`DecoratorHandler`](./types.html#decoratorhandler)

Defined in: [src/core/decorators/debounce/debounce.ts:28](https://github.com/xdan/jodit/blob/main/src/core/decorators/debounce/debounce.ts#L28)

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `V` *extends* [`IViewComponent`](../interfaces/types.IViewComponent.html)\<[`IViewBased`](../interfaces/types.IViewBased.html)\<[`IViewOptions`](../interfaces/types.IViewOptions.html)\>\> | [`IViewComponent`](../interfaces/types.IViewComponent.html)\<[`IViewBased`](../interfaces/types.IViewBased.html)\<[`IViewOptions`](../interfaces/types.IViewOptions.html)\>\> |

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `timeout?` | `number` \| [`IAsyncParams`](../interfaces/types.IAsyncParams.html) \| ((`ctx`) => `number` \| [`IAsyncParams`](../interfaces/types.IAsyncParams.html)) | `undefined` |
| `firstCallImmediately?` | `boolean` | `false` |
| `method?` | `"debounce"` \| `"throttle"` | `'debounce'` |

#### Returns

[`DecoratorHandler`](./types.html#decoratorhandler)

***

### throttle()

**throttle**\<`V`\>(`timeout?`, `firstCallImmediately?`): [`DecoratorHandler`](./types.html#decoratorhandler)

Defined in: [src/core/decorators/debounce/debounce.ts:82](https://github.com/xdan/jodit/blob/main/src/core/decorators/debounce/debounce.ts#L82)

Wrap function in throttle wrapper

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `V` *extends* [`IViewComponent`](../interfaces/types.IViewComponent.html)\<[`IViewBased`](../interfaces/types.IViewBased.html)\<[`IViewOptions`](../interfaces/types.IViewOptions.html)\>\> | [`IViewComponent`](../interfaces/types.IViewComponent.html)\<[`IViewBased`](../interfaces/types.IViewBased.html)\<[`IViewOptions`](../interfaces/types.IViewOptions.html)\>\> |

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `timeout?` | `number` \| [`IAsyncParams`](../interfaces/types.IAsyncParams.html) \| ((`ctx`) => `number` \| [`IAsyncParams`](../interfaces/types.IAsyncParams.html)) | `undefined` |
| `firstCallImmediately?` | `boolean` | `false` |

#### Returns

[`DecoratorHandler`](./types.html#decoratorhandler)