Scheduled
Bindings for @solid-primitives/scheduled.
type Schedule<'T> =
member exec: 'T -> unit // schedule(x) in JavaScript
member clear: unit -> unit
let debounce(callback: 'T -> unit, timespan: int): Schedule<'T>
let throttle(callback: 'T -> unit, timespan: int): Schedule<'T>
let scheduleIdle(callback: 'T -> unit, timespan: int): Schedule<'T>
type DebounceOrThrottle<'T> = ('T -> unit) * int -> Schedule<'T>
let leading(debOrThrot: DebounceOrThrottle<'T>, callback: 'T -> unit, timespan: unit): Schedule<'T>
let leadingAndTrailing(debOrThrot: DebounceOrThrottle<'T>, callback: 'T -> unit, timespan: int): Schedule<'T>
On Solid 2 today
debounce delays a call until timespan ms pass without another one, so a burst of calls runs once. The same thing in plain Partas.Solid, with JS.setTimeout; type quickly and the runs counter stays behind the keystrokes:
[<SolidComponent>]
let DebounceDemo () =
let typed, setTyped = createSignal ""
let settled, setSettled = createSignal ""
let keys, setKeys = createSignal 0
let runs, setRuns = createSignal 0
let mutable timer = 0
let debounced (value: string) =
JS.clearTimeout timer
timer <- JS.setTimeout (fun () -> setSettled value; setRuns (runs () + 1)) 400
onCleanup (fun () -> JS.clearTimeout timer)
div (style = "display: grid; gap: .5rem; width: min(100%, 24rem)") {
input (
placeholder = "Type here",
onInput = fun e ->
let value: string = !!e.currentTarget?value
setTyped value
setKeys (keys () + 1)
debounced value
)
code () { $"typed: {typed ()} ({keys ()} inputs)" }
code () { $"debounced: {settled ()} ({runs ()} runs)" }
}
export function DebounceDemo() {
const patternInput = createSignal("");
const patternInput_1 = createSignal("");
const patternInput_2 = createSignal(0);
const keys = patternInput_2[0];
const patternInput_3 = createSignal(0);
const runs = patternInput_3[0];
let timer = 0;
onCleanup(() => {
clearTimeout(timer);
});
return <div style="display: grid; gap: .5rem; width: min(100%, 24rem)">
<input placeholder="Type here"
onInput={(e) => {
const value_1 = e.currentTarget.value;
patternInput[1](value_1);
patternInput_2[1](keys() + 1);
clearTimeout(timer);
timer = (setTimeout(() => {
patternInput_1[1](value_1);
patternInput_3[1](runs() + 1);
}, 400) | 0);
}} />
<code>
{`typed: ${patternInput[0]()} (${keys()} inputs)`}
</code>
<code>
{`debounced: ${patternInput_1[0]()} (${runs()} runs)`}
</code>
</div>;
}