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]);
  1. 注意:此定时器实际上利用的是回调,层层回调直到count达到阈值,再一步步返回同时执行业务逻辑代码并销毁setTimeout(?后来想了又想,又不怎么想得通,有待考证)
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐