Star

Created With


debounce



Holds incoming values, and emits last one when no new values arrive for given duration.

1linkfunction debounce<T>(duration: number): (src: Source<T>) => Source<T>

1linkimport { debounce, pipe, subscribe, fromEvent } from 'callbag-common';

2link

3linkconst btn = document.querySelector('button');

4linkconst span = document.querySelector('span');

5link

6linkpipe(

7link fromEvent(btn, 'click'),

8link debounce(1000),

9link subscribe(() => span.textContent = 'Got tired?')

10link)

► Try It!



👉 debounce() is particularly useful for when you want to turn live user input into requests, but don't want to overwhelm the API as well:

1linkimport {

2link fromPromise, fromEvent, flatten, subscribe, pipe, map, debounce,

3link} from 'callbag-common';

4link

5linkconst input = document.querySelector('input');

6linkconst span = document.querySelector('span');

7link

8linkconst getRepo = async (repo) => {

9link try {

10link const res = await fetch('https://api.github.com/repos/' + repo);

11link return await res.json();

12link } catch {}

13link}

14link

15linkpipe(

16link fromEvent(input, 'input'),

17link debounce(500),

18link map(() => fromPromise(getRepo(input.value))),

19link flatten,

20link map(repo => repo?.stargazers_count || '??'),

21link subscribe(count => span.textContent = count)

22link);

► Try It!



Home What Are Callbags?

Source Factorieschevron_right
Operatorschevron_right
Combinationchevron_right
Utilitieschevron_right