运行 createEffect 仅适用于在用户交互时触发的特定 setSignal

Question

我正在尝试构建一个文本编辑器，其中 _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"));

Answer 1

您可以设置另一个标志并使用其值来控制效果的执行：

  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"));

运行 createEffect 仅适用于在用户交互时触发的特定 setSignal

run createEffect only for specific setSignal which fires on user interaction

typescript

solid-js