Reprise : async & minuteurs

Des gestionnaires impératifs — setTimeout / setInterval — qui reprennent sans ré-exécuter le composant. Astuce clé : l'état non-signal (id de minuteur) doit vivre dans un signal pour être capturé par la portée du gestionnaire repris.

Astuce

La recherche est anti-rebond (commit après 400 ms d'inactivité). Le chronomètre est piloté par setInterval ; le callback de l'intervalle met à jour l'affichage réactif à chaque tic. Aucun des deux composants ne s'exécute sur le client.

Recherche anti-rebond

(idle)

Chronomètre

0.0s

async.tsxTSX

"use resumable";
import { signal } from "@bext-stack/framework/signals";

// Debounce: the timer id lives in a SIGNAL so it survives resume
// (a plain local would not be captured by the resumed handler scope).
const query = signal(""), typing = signal(false), timer = signal(0);
<input onInput={(e) => {
  const val = e.target.value;
  typing.value = true;
  clearTimeout(timer.value);
  timer.value = setTimeout(() => { query.value = val; typing.value = false; }, 400);
}} />

// Stopwatch: the interval callback closes over a rebound signal,
// so each tick updates the reactive display — component never runs.
id.value = setInterval(() => { tenths.value++; }, 100);