clearInterval 不清除设置的间隔 onMouseUp

Question

尝试在 MouseDown 上创建一个按钮事件，function 应该在设定的时间结束时运行。 function运行onMouseDown并清除onMouseUp的interval，但是释放按钮后interval仍然运行。

这是目前的代码。 我有全局间隔并将其设置在种植 function 中。它应该在 notPlanting function 中取消设置，但它没有。

import React from "react";

function PlantDefuser() {
    var interval

    function planting() {
        interval = setInterval(() => {
            console.log("Defuser Planted")
        }, 1000)
    }

    function notPlanting() {
        console.log(interval)
        clearInterval(interval)
    }

    return (
        <button onMouseDown={planting} onMouseUp={notPlanting}>Press and Hold</button>
    )
}

export default PlantDefuser

Answer 1

这可以帮助您：

useRef允许我们在不触发重新渲染的情况下存储和更新组件中的数据。 现在唯一的重新渲染发生在道具更新时。

我们可以像这样将间隔存储在ref中

import { useRef } from "react";

const PlantDefuser = () => {
  const interval = useRef();

  function planting() {
    interval.current = setInterval(() => {
      console.log("Defuser Planted");
    }, 1000);
  }

  function notPlanting() {
    clearInterval(interval.current);
  }

  return (
    <button onMouseDown={planting} onMouseUp={notPlanting}>
      Press and Hold
    </button>
  );
}

export default PlantDefuser

Answer 2

当您在 function 组件中像这样声明变量时，它会在每次渲染时创建。 您应该像这样将间隔 ID 保存在 state 中：

import React, { useState } from "react";

const PlantDefuser = () => {
    const [plantingInterval, setPlantingInterval] = useState(null);

    const planting = () => {
        const plantingIntervalId = setInterval(() => {
            console.log("Defuser Planted");
        }, 1000);
        setPlantingInterval(plantingIntervalId);
    };

    const notPlanting = () => {
        clearInterval(plantingInterval);
        setPlantingInterval(null);
    };

    return (
        <button onMouseDown={planting} onMouseUp={notPlanting}>
            Press and Hold
        </button>
    );
};

export default PlantDefuser;

您可能还想确保在卸载组件时清除间隔。

Answer 3

您可以使用useEffect hook with cleanup function来管理clearInterval方法。

像这样：

function PlantDefuser() {
  const [run, setRun] = useState(false);

  useEffect(() => {
    if (run) {
      const countTimer = setInterval(() => {
        console.log("Defuser Planted");
      }, 1000);

      return () => {
        console.log(countTimer);
        clearInterval(countTimer);
      };
    }
  }, [run]);

  return (
    <button onMouseDown={() => setRun(!run)} onMouseUp={() => setRun(!run)}>
      Press and Hold
    </button>
  );
}

export default PlantDefuser;