如何计算在每次更新时重置的单独创建效果上施加到播放器的力

Question

我有一个计数器，我想通过添加来累积一些数字。每次更新时，它都重置为0。我想把这些更新分成单独的createEffect。但这行不通。我该如何改变我的逻辑，让玩家顺利前进并在正确的时间停下来。哦，我没有提到这是为了计算物理系统上的作用力。所以之后我将力重置为零。所以计数器是要施加的结果力。

import { render } from "solid-js/web";
import { on, createSignal, createEffect } from "solid-js";
function Counter() {
const [update, setUpdate] = createSignal(0);
const addUpdate = () => setUpdate(update() + 1);
const [count, setCount] = createSignal(0);
createEffect(on(update, dt => {
setCount(0)
}))
createEffect(on(update, dt => {
if (dt % 10 < 3) {
setCount(_ => _ + 3)
}
}))
createEffect(on(update, dt => {
if (dt % 10 < 9) {
setCount(_ => _ + 1)
}
}))
// Expected output: `0 4, 1 4, 2 4, 3 1, 4 1, 5 1, 6 1, 7 1, 8 1, 9 1, 10 4, 11 4, 12 4, 13 1`
createEffect(on(update, () => {
console.log([update(), count()].join(' '))
}))
setInterval(() => {
addUpdate()
}, 500)
return (
<button type="button">
{count()}
</button>
);
}
render(() => <Counter />, document.getElementById("app"));

Answer 1

通过查看你的代码很难理解你想要实现什么。

该效果在每次状态更新时运行。因此，您可以监视计数器，并相应地清理间隔。

import { createEffect, createSignal, on } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
const [count, setCount] = createSignal(0);
const [collecteds, setCollecteds] = createSignal([]);
const int = setInterval(() => setCount(c => c + 1), 500);
createEffect(() => {
if (count() === 5) {
clearInterval(int);
}
});

// This tracks `count` only, so that you can update
// collecteds without triggering an infinite loop
createEffect(on(count, () => {
setCollecteds([...collecteds(), count()]);
}));
return (
<div>{count()} {JSON.stringify(collecteds())}</div>
);
}
render(Counter, document.getElementById("app"));