https://github.com/levyks/svelte-debouncer

Simple debouncer library for svelte (can also be used without it)
https://github.com/levyks/svelte-debouncer

Last synced: 8 days ago
JSON representation

Simple debouncer library for svelte (can also be used without it)

• Host: GitHub
• URL: https://github.com/levyks/svelte-debouncer
• Owner: Levyks
• License: gpl-3.0
• Created: 2022-01-03T15:22:38.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-10-28T11:01:25.000Z (about 1 year ago)
• Last Synced: 2024-02-02T21:08:27.721Z (10 months ago)
• Language: TypeScript
• Size: 18.6 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Svelte Debouncer

Installation:

```

npm install svelte-debouncer

```

## Usage:

```svelte

	

	import Debouncer from './module';

	let search_string: string;

	function search(query: string) {

		alert(`Searching for ${query}`);

	}

	const search_debouncer = new Debouncer(search, 500);

	$: search_debouncer.debounce(search_string);

	

```

(TypeScript is not required)

## Arguments:

### new(callback: (...args: any[]), delay: number, debounce_first: boolean = false): Debouncer

- `callback`: The function to call when the debounce time has elapsed.

- `delay`: The time to wait before calling the callback (in milliseconds).

- `debounce_first`: Whether to start the timer immediately after the first call. (should be false when using with svelte, since it will be called immediately and not only on change, should be true otherwise)

### Debouncer.debounce(...args: any[]): any

- `...args`: The arguments to pass to the callback.

## Usage without Svelte:

Despite it's name, this module can be used without Svelte.

You'll just need to pass `true` as the third argument of the constructor (`debounce_first`) and then call the `debounce` method on the input event of the field you want to debounce.

	

### Vue:

```vue

	

import { defineComponent } from "vue";

import Debouncer from 'svelte-debouncer';

export default defineComponent({

  data() {

    return {

      search_debouncer: new Debouncer(this.search, 1000, true),

    }

  },

  methods: {

    search(query: string) {

      alert(`Searching for ${query}`);

    }  

  }

});

```

### React:

(Although there's probably better alternatives to debounce inputs in React)

```tsx

import Debouncer from "svelte-debouncer";

function App() {

  function search(query: string) {

    alert(`Searching for ${query}`);

  }

  const search_debouncer = new Debouncer(search, 1000, true);

  return (

     search_debouncer.debounce(e.target.value)}/>

  );

}

export default App;

```