如何创建一个延迟基础信号并立即清除的信号

Question

我想制作一个信号，该信号在一定的延迟后设置为基础信号或备忘录，并立即清除基础信号。以下代码演示了我想要的。

import { render } from "solid-js/web";
import { For, createSignal, createEffect } from "solid-js";

function Counter() {
   const [s, setS] = createSignal(undefined)
   const [delayedS, delayedSetS] = createSignal(undefined)


   setTimeout(() => {
     setS(10)
   }, 1000)

   setTimeout(() => {
     setS(undefined)
   }, 3000)

   createEffect(() => {
      let res = s()
      if (res !== undefined) {
         setTimeout(() => delayedSetS(res), 1000)
      } else {
         delayedSetS(undefined)
      }
   })

  return (<>
    <span> S {s()} </span>
    <span> Delayed S {delayedS()}</span>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

这有效，尽管这是一种正确的方法。我不确定CreateDeferred是否提供此功能，尽管我不想使用它，因为它使用了调度程序，我不确定它的作用。

Answer 1

您的尝试是完全有效的。

create> create eferred类似的用户酶，它在这里无法按预期工作，因为：

1. 超时传递给createferred不是它在引起更新之前等待的确切时间 - 这是等待之前的最大超时时间浏览器变得空闲。
2. 超时会在将信号更新为不确定的和其他值之前发生。

const delayedS = createDeferred(s)

设置信号的优选原始性是 creation creationecompated 。它是一个纯粹的计算 - 类似于createMeMo - 这意味着它将在效果之前立即运行。在简单的示例中，通常没有效果的差异，但是使用效果来设置信号可能会导致更多的更新。

  createComputed(
    on(s, (v) => {
      if (v) setTimeout(() => setDelayedS(v), 1000);
      else setDelayedS();
    })
  );

另外，将集合的超时清除到不确定的时，这种不延迟会消除某些正时故障。

  let timeoutId = 0;
  createComputed(
    on(s, (v) => {
      if (v) timeoutId = setTimeout(() => setDelayedS(v), 1000);
      else {
        setDelayedS();
        clearTimeout(timeoutId);
      }
    })
  );
  onCleanup(() => clearTimeout(timeoutId));

Answer 2

您可以使用 @solid-primitives/stolid-primitives/stolice>一些延迟的反应性功能。

import {createMemo, createSignal} from 'solid-js';
import {createScheduled, throttle} from '@solid-primitives/scheduled';

const [count, setCount] = createSignal(0);
const scheduled = createScheduled(callback => throttle(callback, 1000)); // 1000 ms delay

const debouncedCount = createMemo(
  (previousCount) => scheduled() ? count() : previousCount,
  0
);

createEffect(() => {
  // This message gets printed at most once every second because debouncedCount()
  // is a dependency, regardless of how many times setCount is called.
  console.log(debouncedCount());
});

在这里，如果要重复调用setCount，debouncedcount只会每秒更新。还有其他调度选项，例如debounce，以及领导之类的修饰符。

上面的页面还具有a demo ，这些证明了不同的调度选项之间的差异。