Debounce Service

A Service for creating debounced functions with manual control over execution and cancellation. Perfect for optimizing performance in scenarios like search inputs, API calls, and event handlers.

Features

• Manual Control: Explicit run() and cancel() methods for fine-grained control
• Memory Efficient: Proper cleanup of timers
• Flexible: Works with any callback function

Service Reference

Types

type DebounceHandler<T = void> = {
  run: (arg?: T) => void;
  cancel: () => void;
};

createDebounce

Creates a debounced handler with manual control over execution and cancellation.

const createDebounce = <T = void>(
    callback: (arg?: T) => void,
    delay: number
): DebounceHandler<T>;

Parameters

Parameter	Type	Description
callback	(arg?: T) => void	The function to be debounced, optionally receiving an argument
delay	number	The delay in milliseconds before execution

Returns

DebounceHandler<T> - An object with run and cancel methods

• run(arg?: T): Starts or restarts the debounce timer. You can optionally pass an argument which will be provided to the callback when executed.
• cancel(): Cancels the pending execution and clears the timer

Usage Examples

Without arguments

<template>
  <input type="text" @input="debounce.run()" placeholder="Type something..." />
  <button @click="debounce.cancel()" class="btn">Stop Debounce</button>
</template>

<script setup lang="ts">
import CreateDebounce from "dolphin-components";

const debounce = CreateDebounce(() => {
  alert("Debounced function executed!");
}, 3000);
</script>

With arguments

<template>
  <input
    type="text"
    @input="(e) => debounce.run(e.target.value)"
    placeholder="Type something..."
  />
  <button @click="debounce.cancel()" class="btn">Stop Debounce</button>
</template>

<script setup lang="ts">
import CreateDebounce from "dolphin-components";

const debounce = CreateDebounce<string>((inputValue) => {
  alert(`Debounced function executed with input: ${inputValue}`);
}, 3000);
</script>

Common Use Cases

• Search Inputs: Debounce search queries as user types
• API Calls: Prevent rapid-fire requests
• Validation: Delay validation until user finishes input

Best Practices

1. Choose Appropriate Delays
2. Always Cancel on Cleanup: Prevent memory leaks by canceling debounced functions when components unmount
3. Handle Edge Cases: Check for empty inputs or invalid states before execution