@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
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
Defined in
jodit/src/core/decorators/debounce/debounce.ts:83