卸载组件时如何清除Interval

Question

我在下面有这个简化的代码。当用户点击 CLICK ME 时，它将开始一个 5 秒的间隔，之后将执行 doSomethingImportant()。它运行良好，除非有人单击另一个组件（工具栏、页脚）将您带到另一个组件。在这种情况下，间隔将一直执行。我怎样才能防止这种情况发生？以便在卸载 AnswerScreen 时清除间隔？下面的“技巧”不起作用。

const AnswerScreen = (props) => {

    const [timeout, setTimeout] = useState(false);
    useEffect(() => {        
      return () => { clearInterval(timeout) }
    }, []);
    
    const itemClickHandler = (index, value) => {
      setTimeout(setInterval(() => {
        props.doSomethingImportant();
        return () => { clearInterval(timeout) }
      }, 5000));    
    }

    return (
        <div onClick={() => itemClickHandler(3, 4)}>CLICK ME</div>
    );
}
    
export default connect(null, null)(AnswerScreen);

Answer 1

clearTimeout( id )

与

setTimeout

使用

clearTimeout

与

setInterval

使用

clearInterval

清除路由到另一个组件时的超时

useEffect(()=>{
 return () => clearTimeout(timeoutRef.current)
},[])

当用户点击按钮 2 次或更多次时清除之前的超时

const AnswerScreen = (props) => {
    const timeoutRef = useRef(null);
    
      const itemClickHandler = (index, value) => {
          if(timeoutRef.current) clearTimeout(timeoutRef.current)
          timeoutRef.current=setTimeout(setInterval(() => {
             //do what ever you want
             props.doSomethingImportant();
          }, 5000));   
    }

    return (
        <div onClick={() => itemClickHandler(3, 4)}>CLICK ME</div>
    );
}