2

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"));
eguneys
  • 6,028
  • 7
  • 31
  • 63

1 Answers1

1

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"));
snnsnn
  • 10,486
  • 4
  • 39
  • 44
  • I don't feel confident navigating this, looks like spagetti code to me, anyway. – eguneys May 28 '22 at 20:26
  • You don't need to set another interval, that's for demo, I wasn't sure where to add it so I used another interval. You can always set the flag, do your work and unset it. – snnsnn May 28 '22 at 20:33
  • Yes that fixed the issue, the flag wasn't superflous in my case, which i already had one that tracks either if a d is pressed, followed by a motion, causes this create effect to delete. I just had to switch the order when I set it back to false, and update the cursor. The problem is when I write a flag it doesn't immediately take effect, for example if i read it on the same block that makes me a little nervous. – eguneys May 28 '22 at 20:42
  • Hard to say anything without seeing the code but if you are setting multiple signals for the flags to take effect, you may need to batch them or use an object and for the immediacy, you can use createComputed which fires earlier than effects. – snnsnn May 28 '22 at 20:46