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)

👉 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);

• Source