跳到主要内容

useTimeoutFn

可取消的 setTimeout

Usage​

实时编辑器

function Demo() {
  const [text, setText] = useState("Please wait for 3 seconds");
  const [isPending, start] = useTimeoutFn(
    () => {
      setText("Fired!");
    },
    3000,
    { immediate: false },
  );

  return (
    <div>
      <p>{text}</p>
      <button
        onClick={() => {
          setText("Please wait for 3 seconds");
          start();
        }}
      >
        {isPending ? "Pending" : "Restart"}
      </button>
    </div>
  );
};
结果
Loading...

API​

useTimeoutFn​

Returns​

Stoppable: 包含以下元素的元组：

  • 是否等待定时器执行。
  • 设置定时器。
  • 取消定时器。

Arguments​

参数名描述类型默认值
cb回调(...args: unknown[]) => any (必填)-
interval间隔时间number (必填)-
options可选参数UseTimeoutFnOptions | undefined-

UseTimeoutFnOptions​

参数名描述类型默认值
immediate立即设置定时器booleantrue