javascript setInterval即使在clearInterval之后仍保持运行

bmvo0sr5  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(394)

先谢了。我的问题是:这是一个情侣问答网站。
在伙伴完成测验之前,它每5秒向服务器发送一次获取请求。但问题是即使伙伴的答案已经设置,setInterval也不会停止。
但是如果我刷新我的网站,它运行良好。你能给予我建议吗?

const postAnswers = useGetResults();
  const postPartnerAnswers = useGetPartnerResults();
  const [myResult, setMyResult] = useState<FinalAnswer | undefined>();
  const [partnerResult, setPartnerResult] = useState<FinalAnswer | undefined>();
  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const init = async () => {
    try {
      const email = localStorage.getItem('email');
      const partnerEmail = localStorage.getItem('partnerEmail');
      if (email !== undefined && partnerEmail !== undefined) {
        // localStorage에 이메일 값들이 있으면,
        const result = await postAnswers(email, partnerEmail);
        const otherResult = await postPartnerAnswers(email, partnerEmail);

        if (result.answers !== undefined && otherResult.answers !== undefined) {
          // 몽고디비에서 받아온 값이 둘다 있으면
          setMyResult(result);
          setPartnerResult(otherResult);
        } else {
          // 몽고디비에서 받아온 값이 없으면
          console.log(result.answers, otherResult.answers);
          setIsLoading(true);
        }
      }
    } catch (error) {
      setErrorMessage('로딩하는 도중 에러가 발생했습니다');
      console.error(error);
    }
  };

  useEffect(() => {
    init();
  }, []);

  useEffect(() => {
    if (myResult !== undefined && partnerResult !== undefined) {
      setIsLoading(false);
      console.log('둘다 값이 있어요!');
      console.log(isLoading);
    }
  }, [myResult, partnerResult]);

  const timer = () => {
    return setInterval(() => {
      init();
      console.log('isLoading', isLoading);
      if (isLoading === false) {
        console.log('clear');
        clearInterval(timer());
      }
    }, 5000);
  };

  useEffect(() => {
    if (isLoading === true) {
      console.log('둘다 값이 없어요!');
      timer();
    }
    if (isLoading === false) {
      console.log('clear');
      clearInterval(timer());
    }
  }, [isLoading]);

部署的网站:https://www.couple-quiz.com/

c9qzyr3d

c9qzyr3d1#

@Ethansocal评论展开:
您的代码正在调用clearInterval(timer()),这将创建一个新的间隔,它将立即清除。您似乎混淆了removeEventListenerclearInterval的API。
应使用setInterval返回的标识符调用clearInterval
我建议去掉timer函数,重写最后一个useEffect,使其在isLoadingtrue时返回一个cleanup函数:

useEffect(() => {
  if (isLoading) {
    console.log('둘다 값이 없어요!');
    const interval = setInterval(init, 5_000);
    return () => { clearInterval(interval) };
  } else {
    console.log('clear');
  }
}, [isLoading]);

相关问题