我正在嘗試構建一個文本編輯器，_cursor游標的位置在哪里。setInterval 4000 seconds就像用戶移動游標一樣。在這種情況下，我想運行一個效果。
但是我經常在內部將游標設定為副作用，例如當洗掉或添加某些文本或撤消時。在那種情況下，我不想createEffect在示例中運行。
那么我如何使createEffect唯一的第二次setInterval 4000而不是第一次運行setInterval。
import { render } from "solid-js/web";
import { For, createSignal, createEffect, on } from "solid-js";
function Counter() {
const [_cursor, _setCursor] = createSignal(100)
createEffect(on(_cursor, (v, p) => {
if (p && v < p) {
console.log('reset')
}
}))
setInterval(() => {
_setCursor(_cursor() - 1)
}, 500)
setInterval(() => {
_setCursor(_cursor() - 1)
}, 4000)
return (<>
<span>{_cursor()}</span>
</>)
}
render(() => <Counter />, document.getElementById("app"));
uj5u.com熱心網友回復：
您可以設定另一個標志并使用其值來控制效果的執行：
const [flag, setFlag] = createSignal(true);
createEffect(on(_cursor, (v, p) => {
if (flag()) return;
if (p && v < p) {
console.log('reset')
}
}));
請注意，效果不跟蹤標志：
import { createEffect, createSignal, on } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
const [cursor, setCursor] = createSignal(100);
const [flag, setFlag] = createSignal(true);
createEffect(on(cursor, (v, p) => {
if (flag()) return;
if (p && v < p) {
console.log('reset')
}
}))
setInterval(() => {
setCursor(cursor() - 1);
}, 500);
setInterval(() => {
setCursor(cursor() - 1)
}, 4000);
// This is for demonstrating the logic
setInterval(() => setFlag(!flag()), 1000);
return (
<>
<span>{cursor()}</span>
</>
)
}
render(() => <Counter />, document.getElementById("app"));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/482442.html