Function debounce

A utility for debouncing high-frequency updates. The returned value will only be updated every ms and is initially undefined.

This can be useful when a user's typing is updating a tracked property and you want to derive data less frequently than on each keystroke.

Note that this utility requires the

Use

decorator (debounce could be implemented without the need for the

Use

decorator but the current implementation is 8 lines)

Example

 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { debounce } from 'ember-resources/util/debounce';

 const delay = 100; // ms

 class Demo extends Component {
   @tracked userInput = '';

   @use debouncedInput = debounce(delay, () => this.userInput);
 }

Example

This could be further composed with RemoteData

 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { debounce } from 'ember-resources/util/debounce';
 import { RemoteData } from 'ember-resources/util/remote-data';

 const delay = 100; // ms

 class Demo extends Component {
   @tracked userInput = '';

   @use debouncedInput = debounce(delay, () => this.userInput);

   @use search = RemoteData(() => `https://my.domain/search?q=${this.debouncedInput}`);
 }