Javascript 如何停止这个递归函数 import React，{useCallback，useState}来自“React”； 从“/chat_data.json”/”导入{chat_chat}chat_聊天阵列的长度超过10000 函数App（）{ const[slug，setSlug]=使用状态（0）； //const[stop，setStop]=使用状态（false）； //const stopFn=useCallback（（）=>{ //设置停止（！停止）； //}，[停止]； 常量slugAndURLImport=useCallback（（）=>{ 设i=0； 让停止=错误； 常量loopFn=（）=>{ 设置超时（（）=>{ 控制台日志（“停止”，i，停止）； if（chat_chat.length{ 停止=真； }; }, []); 返回( “开始” {slug} { slugAndURLImport（）； }}> 停止 ); } 导出默认应用程序；

有没有办法阻止正在运行的loopFn

loopFn是一个从json中的数组导入数据的函数

或者除了递归函数还有其他方法吗

我想在按下按钮时停止该功能

但是，新函数会启动和停止，而正在进行的函数不会停止

javascript无法停止正在进行的函数吗

---

我想在react hooks中使用它。

您可以在递归函数中使用

setInterval

而不是

setTimeout

。如果将

setInterval

的输出存储到变量中（可能使用

useRef

hook），则可以调用

clearInterval

停止循环。

可以在递归函数中使用

setInterval

而不是

setTimeout

。如果您将

setInterval

的输出存储到一个变量中（可能使用

useRef

hook），那么您可以调用

clearInterval

来停止循环。

我简要说明了这可能如何工作。我简要说明了这可能如何工作。

import React, { useCallback, useState } from "react";
import { chat_chat } from "./chat_data.json"; // Length of the chat_chat array is over 10000

function App() {
  const [slug, setSlug] = useState(0);
  // const [stop, setStop] = useState(false);

  // const stopFn = useCallback(() => {
  //   setStop(!stop);
  // }, [stop]);

  const slugAndURLImport = useCallback(() => {
    let i = 0;
    let stop = false;
    const loopFn = () => {
      setTimeout(() => {
        console.log("stop", i, stop);
        if (chat_chat.length < i || stop) {
          return;
        }
        setSlug(chat_chat[i].slug);
        i++;
        loopFn();
      }, 2000);
    };
    loopFn();
    return () => {
      stop = true;
    };
  }, []);

  return (
    <>
      <div>
        <button onClick={slugAndURLImport}> "Start" </button>
      </div>
      <div>{slug}</div>
      <div>
        <button
          onClick={() => {
            slugAndURLImport()();
          }}>
          Stop
        </button>
      </div>
    </>
  );
}

export default App;