无法在我的React Elect Electon屏幕跟踪器应用程序中停止递归settimeout函数

Question

我正在使用屏幕跟踪器应用程序，该应用程序每10分钟进行一次屏幕截图，然后将其上传到Firebase存储中。单击“开始功能”时，我正在调用启动功能，并希望当我单击“停止”按钮时停止捕获屏幕，但它不起作用，我不明白为什么。我是一个自学成才的开发人员，经验不到3个月。请帮忙。

function App() {
  // store the screenshots in an array
  const [newScreenshots, setNewScreenshots] = useState("");
  // const [screenshots, setScreenshots] = useState([]);
  const [timeoutId, setTimeoutId] = useState(false);
  const [progress, setProgress] = useState(0);

  const uploadFiles = (img) => {
    // logic
    const storageRef = ref(storage, `/screenshots/${uuidv4()}`);

    uploadString(storageRef, img, "data_url").then((snapshot) => {
      console.log("Uploaded a data_url string!");
    });
  };

  let newTimeoutId;
  const screenshot = async () => {
    setTimeoutId(true);

    const newTimeoutId = setTimeout(async () => {
      const screenshotData = await ipcRenderer.invoke("capture");
      const string = new Buffer.from(screenshotData).toString("base64");
      const img = `data:image/png;base64,${string}`;
      console.log(img);
      uploadFiles(img);
      screenshot();
    }, 600000);
  };

// This function is not working. I'm trying to call it using  button click.

  const stopScreenshot = () => {
    setTimeoutId(false);
    clearTimeout(newTimeoutId);
  };

Answer 1

因此，我将避免使用settimeout，而是使用setInterval，它需要一个功能和时间间隔来启动它。
此外，我会创建一个函数takecreenshot，它只是照顾屏幕截图（也许您需要有一天按需进行屏幕截图，完成一半的工作将是很好的：:)）

const takeScreenshot = async () => {
const screenshotData = await ipcRenderer.invoke("capture");
      const string = new Buffer.from(screenshotData).toString("base64");
      const img = `data:image/png;base64,${string}`;

      uploadFiles(img);
      screenshot();
}

const startRecording = () => {
      setInterval(() => takeScreenshot() , 60000)
}

stopRecording = () => {clearInterval(startRecording)}

**您可能需要编辑它一点