React中的定时器
- react中每次状态改变都会导致页面更新,因此定时器得有特殊的配置,不然每次页面更新都会重开一个定时器
- 每个setTimeout用完之后都是立刻销毁的
- 并且由于setInterval的缺点(实际执行时间不定,且可能会掉帧),所以使用setTimeout来进行模拟
- 代码如下:
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]);
- 注意:此定时器实际上利用的是回调,层层回调直到count达到阈值,再一步步返回同时执行业务逻辑代码并销毁setTimeout(?后来想了又想,又不怎么想得通,有待考证)