@debounce and @throttle

Wraps a component method in Async.debounce. This makes it possible to reduce the load on 'heavy' functions.
For example:

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

Type parameters

Name Type
V extends IViewComponent<IViewBased<IViewOptions>> = IViewComponent<IViewBased<IViewOptions>>

Parameters

Name Type Default value
timeout? number | IAsyncParams | (ctx: V) => number | IAsyncParams undefined
firstCallImmediately boolean false
method "debounce" | "throttle" 'debounce'

Returns

DecoratorHandler

Defined in

src/core/decorators/debounce/debounce.ts#28


throttle

throttle<V>(timeout?, firstCallImmediately?): DecoratorHandler

Wrap function in throttle wrapper

Type parameters

Name Type
V extends IViewComponent<IViewBased<IViewOptions>> = IViewComponent<IViewBased<IViewOptions>>

Parameters

Name Type Default value
timeout? number | IAsyncParams | (ctx: V) => number | IAsyncParams undefined
firstCallImmediately boolean false

Returns

DecoratorHandler

Defined in

jodit/src/core/decorators/debounce/debounce.ts:83

Previous