0.0.2 • Published 2 years ago
svelte-reactive-debounce v0.0.2
svelte-reactive-debounce
Easily debounce svelte store updates and reactive statements ($:
statements).
Installation
npm install svelte-reactive-debounce
Usage
- Debounce a svelte store (
readable
/writable
/derived
)
<script lang="ts">
import { writable } from 'svelte/store'
import { debounce } from 'svelte-reactive-debounce'
const value = writable('world')
const debounced = debounce(value, 300 /* debounce time (millisecond)*/)
</script>
<input bind:value="{$value}" />
<h1>Hello, {$debounced}!</h1>
- Debounce svelte reactive statements (
$:
)
<script lang="ts">
import { writable } from 'svelte/store'
import { debounceTimer } from 'svelte-reactive-debounce'
const keyword = writable('')
let result = ''
const timer = debounceTimer(500 /* debounce time (millisecond)*/)
$: if ($keyword.length > 0 && $timer.up()) {
result = 'Searching...'
setTimeout(() => {
result = `I\'m the searching result of ${$keyword}.`
}, 500)
}
</script>
Search: <input bind:value="{$keyword}" />
<p>{result}</p>