React中的定时器-js

React中的定时器

1. react中每次状态改变都会导致页面更新，因此定时器得有特殊的配置，不然每次页面更新都会重开一个定时器
2. 每个setTimeout用完之后都是立刻销毁的
3. 并且由于setInterval的缺点（实际执行时间不定，且可能会掉帧），所以使用setTimeout来进行模拟
4. 代码如下：

// 设置状态count
const [count,setCount]=useState(10);

// 定时更新数据
useEffect(() => {
  let timerId = null;
  const run = () => {
    if (count <= 0) {
      return () => {
        timerId && clearTimeout(timerId);
      };
    }
    setCount(count - 1);
    timerId = setTimeout(run, 1000);
    // 这下面为相关的业务代码
    setData(allData.data[count-1]);
  };
  timerId = setTimeout(run, 	1000);
  return () => {
    timerId && clearTimeout(timerId);
  };
}, [count]);

5. 注意：此定时器实际上利用的是回调，层层回调直到count达到阈值，再一步步返回同时执行业务逻辑代码并销毁setTimeout（？后来想了又想，又不怎么想得通，有待考证）