useTimeoutFn

可取消的 setTimeout

Usage

即時編輯器

function Demo() {
  const [text, setText] = useState("請等待3秒鐘");
  const [isPending, start] = useTimeoutFn(
    () => {
      setText("已觸發！");
    },
    3000,
    { immediate: false },
  );

  return (
    <div>
      <p>{text}</p>
      <button
        onClick={() => {
          setText("請等待3秒鐘");
          start();
        }}
      >
        {isPending ? "等待中" : "重新開始"}
      </button>
    </div>
  );
};

結果

請等待3秒鐘

API

useTimeoutFn

Returns

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

• 是否等待定時器執行。
• 設置定時器。
• 取消定時器。

Arguments

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

UseTimeoutFnOptions

參數名	描述	類型	預設值
immediate	立即设置定时器	boolean	true