mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-07 14:07:06 +02:00
68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
import { S } from "deka-dom-el/signals";
|
|
|
|
// ===== Approach 1: Traditional debouncing with utility function =====
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return (...args)=> {
|
|
clearTimeout(timeout);
|
|
timeout= setTimeout(() => func(...args), wait);
|
|
};
|
|
}
|
|
|
|
const inputSignal = S("");
|
|
const debouncedSet = debounce(value => inputSignal.set(value), 300);
|
|
|
|
// In your input handler
|
|
inputElement.addEventListener("input", e => debouncedSet(e.target.value));
|
|
|
|
// ===== Approach 2: Signal debouncing utility =====
|
|
/**
|
|
* Creates a debounced signal that only updates after delay
|
|
* @param {any} initialValue Initial signal value
|
|
* @param {number} delay Debounce delay in ms
|
|
*/
|
|
function createDebouncedSignal(initialValue, delay = 300) {
|
|
// Create two signals: one for immediate updates, one for debounced values
|
|
const immediateSignal = S(initialValue);
|
|
const debouncedSignal = S(initialValue);
|
|
|
|
// Keep track of the timeout
|
|
let timeout = null;
|
|
|
|
// Set up a listener on the immediate signal
|
|
S.on(immediateSignal, value => {
|
|
// Clear any existing timeout
|
|
if (timeout) clearTimeout(timeout);
|
|
|
|
// Set a new timeout to update the debounced signal
|
|
timeout = setTimeout(() => {
|
|
debouncedSignal.set(value);
|
|
}, delay);
|
|
});
|
|
|
|
// Return an object with both signals and a setter function
|
|
return {
|
|
// The raw signal that updates immediately
|
|
raw: immediateSignal,
|
|
// The debounced signal that only updates after delay
|
|
debounced: debouncedSignal,
|
|
// Setter function to update the immediate signal
|
|
set: value => immediateSignal.set(value)
|
|
};
|
|
}
|
|
|
|
// Usage example
|
|
const searchInput = createDebouncedSignal("", 300);
|
|
|
|
// Log immediate changes for demonstration
|
|
S.on(searchInput.raw, value => console.log("Input changed to:", value));
|
|
|
|
// Only perform expensive operations on the debounced value
|
|
S.on(searchInput.debounced, value => {
|
|
console.log("Performing search with:", value);
|
|
// Expensive operation would go here
|
|
});
|
|
|
|
// In your input handler
|
|
searchElement.addEventListener("input", e => searchInput.set(e.target.value));
|