Как создать сигнал, который задерживает базовый сигнал и немедленно очищается
Я хочу сделать сигнал, который настраивается на базовый сигнал или заметку после определенной задержки и немедленно очищается, если базовый сигнал очищается. Следующий код демонстрирует то, что я хочу.
import { render } from "solid-js/web";
import { For, createSignal, createEffect } from "solid-js";
function Counter() {
const [s, setS] = createSignal(undefined)
const [delayedS, delayedSetS] = createSignal(undefined)
setTimeout(() => {
setS(10)
}, 1000)
setTimeout(() => {
setS(undefined)
}, 3000)
createEffect(() => {
let res = s()
if (res !== undefined) {
setTimeout(() => delayedSetS(res), 1000)
} else {
delayedSetS(undefined)
}
})
return (<>
<span> S {s()} </span>
<span> Delayed S {delayedS()}</span>
</>)
}
render(() => <Counter />, document.getElementById("app"));
Это работает, хотя это правильный подход. Я не уверен, предоставляет ли createDeferred эту функциональность, хотя я не хочу ее использовать, так как она использует планировщик, я не уверен, что он делает.
Ответы 1
Ваша попытка была полностью оправдана.
createDeferred, хотя и похоже, что он имеет аналогичный вариант использования, здесь он не будет работать, как предполагалось, потому что:
- Тайм-аут, переданный
createDeferred, не является точным количеством времени, которое он будет ждать, прежде чем вызывать обновления — это максимальный тайм-аут ожидания, прежде чем браузер станет бездействующим. - Тайм-аут произойдет до обновления сигнала до
undefinedи других значений.
const delayedS = createDeferred(s)
Предпочтительным примитивом для установки сигналов является createComputed. Это чистое вычисление — похожее на createMemo — это означает, что оно будет выполняться непосредственно перед эффектами. В простых примерах обычно нет разницы в использовании эффекта, но использование эффекта для установки сигналов потенциально может привести к большему количеству обновлений, чем необходимо.
createComputed(
on(s, (v) => {
if (v) setTimeout(() => setDelayedS(v), 1000);
else setDelayedS();
})
);
Кроме того, сброс тайм-аута на наборе до undefined, который происходит без задержки, может устранить некоторые временные сбои.
let timeoutId = 0;
createComputed(
on(s, (v) => {
if (v) timeoutId = setTimeout(() => setDelayedS(v), 1000);
else {
setDelayedS();
clearTimeout(timeoutId);
}
})
);
onCleanup(() => clearTimeout(timeoutId));