仅针对特定的setSignal运行createEffect，以触发用户交互

发布于 2025-02-02 02:39:05 字数 919 浏览 2 评论 0原文

我正在尝试构建一个文本编辑器，其中_cursor是光标的位置。 setInterval 4000秒就像用户移动光标。在这种情况下，我想运行效果。

但是通常我将光标设置为内部效果，例如，当某些文本被删除或添加或撤消时。在这种情况下，我不想在示例中运行createefect。

因此，如何使createefect仅用于第二个setInterval 4000而不是第一个set> 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"));

原文

I am trying to build a text editor, where _cursor is position of the cursor. setInterval 4000 seconds is like user moving the cursor. In which case I want to run an effect.

But often I set the cursor as a side effect internally, for example when some text is deleted or added or an undo. In that case I don't want to run the createEffect in the example.

So how do I make the createEffect only run for second setInterval 4000 and not for the first 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"));

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江城子 2025-02-09 02:39:05

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

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

You can set another flag and use its value to control the execution of the effect:

  const [flag, setFlag] = createSignal(true);

  createEffect(on(_cursor, (v, p) => {
    if (flag()) return;
    if (p && v < p) {
      console.log('reset')
    }
  }));

Please note that, the effect does not track the flag:

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

回复收藏 0 原文

~没有更多了~