This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
export * from "./use-debounce.svelte.js";
+1
View File
@@ -0,0 +1 @@
export * from "./use-debounce.svelte.js";
@@ -0,0 +1,25 @@
import type { MaybeGetter } from "../../internal/types.js";
type UseDebounceReturn<Args extends unknown[], Return> = ((this: unknown, ...args: Args) => Promise<Return>) & {
cancel: () => void;
runScheduledNow: () => Promise<void>;
pending: boolean;
};
/**
* Function that takes a callback, and returns a debounced version of it.
* When calling the debounced function, it will wait for the specified time
* before calling the original callback. If the debounced function is called
* again before the time has passed, the timer will be reset.
*
* You can await the debounced function to get the value when it is eventually
* called.
*
* The second parameter is the time to wait before calling the original callback.
* Alternatively, it can also be a getter function that returns the time to wait.
*
* @see {@link https://runed.dev/docs/utilities/use-debounce}
*
* @param callback The callback to call when the time has passed.
* @param wait The length of time to wait in ms, defaults to 250.
*/
export declare function useDebounce<Args extends unknown[], Return>(callback: (...args: Args) => Return, wait?: MaybeGetter<number | undefined>): UseDebounceReturn<Args, Return>;
export {};
+92
View File
@@ -0,0 +1,92 @@
import { extract } from "../extract/extract.svelte.js";
/**
* Function that takes a callback, and returns a debounced version of it.
* When calling the debounced function, it will wait for the specified time
* before calling the original callback. If the debounced function is called
* again before the time has passed, the timer will be reset.
*
* You can await the debounced function to get the value when it is eventually
* called.
*
* The second parameter is the time to wait before calling the original callback.
* Alternatively, it can also be a getter function that returns the time to wait.
*
* @see {@link https://runed.dev/docs/utilities/use-debounce}
*
* @param callback The callback to call when the time has passed.
* @param wait The length of time to wait in ms, defaults to 250.
*/
export function useDebounce(callback, wait) {
let context = $state(null);
const wait$ = $derived(extract(wait, 250));
function debounced(...args) {
if (context) {
// Old context will be reused so callers awaiting the promise will get the
// new value
if (context.timeout) {
clearTimeout(context.timeout);
}
}
else {
// No old context, create a new one
let resolve;
let reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
context = {
timeout: null,
runner: null,
promise,
resolve: resolve,
reject: reject,
};
}
context.runner = async () => {
// Grab the context and reset it
// -> new debounced calls will create a new context
if (!context)
return;
const ctx = context;
context = null;
try {
ctx.resolve(await callback.apply(this, args));
}
catch (error) {
ctx.reject(error);
}
};
context.timeout = setTimeout(context.runner, wait$);
return context.promise;
}
debounced.cancel = async () => {
if (!context || context.timeout === null) {
// Wait one event loop to see if something triggered the debounced function
await new Promise((resolve) => setTimeout(resolve, 0));
if (!context || context.timeout === null)
return;
}
clearTimeout(context.timeout);
context.reject("Cancelled");
context = null;
};
debounced.runScheduledNow = async () => {
if (!context || !context.timeout) {
// Wait one event loop to see if something triggered the debounced function
await new Promise((resolve) => setTimeout(resolve, 0));
if (!context || !context.timeout)
return;
}
clearTimeout(context.timeout);
context.timeout = null;
await context.runner?.();
};
Object.defineProperty(debounced, "pending", {
enumerable: true,
get() {
return !!context?.timeout;
},
});
return debounced;
}