Setinterval 配合 useeffect使用

1
2
3
4
5
6
7
8
9
10
11
12
let setIntervalHandler;
  useEffect(() => {
    setIntervalHandler = setInterval(() => {
      setReadTimeout(readTimeout - 1);
      if (readTimeout <= 0) {
        setIsScrolled(true);
        clearInterval(setIntervalHandler);
      }
      console.log('readTimeout', readTimeout);
    }, 1000);
    return () => clearInterval(setIntervalHandler);
  }, [readTimeout]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  const intervalMemo = () => {
    setIntervalHandler = setInterval(() => {
      setReadTimeout(readTimeout => {
        if (readTimeout <= 1) {
          setIsScrolled(true);
          clearInterval(setIntervalHandler);
        }
        return readTimeout - 1;
      });
    }, 1000);
  };
  useEffect(() => {
    intervalMemo();
  }, []);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const [count, setCount] = useState(0);

// 通过 ref 来记忆最新的 count
const countRef = useRef(count);
countRef.current = count;

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(countRef.current)
  }, 3000);
  return () => {
    clearTimeout(timer);
  }
}, [])