如何在使用钩子时通过切换功能设置和清除间隔？

Question

我正在尝试构建计时器女巫，是由功能为[[handleToggle的一个按钮触发的，它看起来像：

const handleToggle = () => {
    let timer = () => setInterval(() => {
      dispatch({ type: "COUNT", payload: Date.now() - startTime });
    }, 100);
    const startTime = Date.now() - AppState.runningTime;
    if (AppState.countingStarted) {
      dispatch({
        type: "COUNTING_STARTED",
        payload: false
      });
      clearInterval(timer());
    } else {
      timer()
      dispatch({ type: "COUNTING_STARTED", payload: true });
    }
  };

COUNTING_STARTED

是一个调度功能，可切换AppState.countingStarted。我正在努力停止计时器，如何清除计时器间隔？我尝试过：

const handleToggle = () => {
    let timer;
    if (AppState.countingStarted) {
      dispatch({
        type: "COUNTING_STARTED",
        payload: false
      });
      clearInterval(timer);
    } else {
      timer = setInterval(() => {
        dispatch({ type: "COUNT", payload: Date.now() - startTime });
      }, 100);
      const startTime = Date.now() - AppState.runningTime;
      dispatch({ type: "COUNTING_STARTED", payload: true });
    }
  };

但没有区别...

Answer 1

有两件事：传递给clearInterval的内容必须是setInterval的返回值；在第一个示例中，您正在将自己的函数传递给它。第二个示例具有此权利，但是您将timer（调用setInterval的结果）存储在toggle函数的范围内，这意味着一旦函数完成，您将失去对它的引用。下次调用该函数（例如停止该函数）时，您将重新定义timer，这不是您想要的。

Answer 2

在您的示例中，对intervalId的引用在函数执行结束时丢失。