背景

我是在 react 的函数组件中遇到这个问题的,

出现问题的代码片段:

const SelfDevProgress = (props)=> {const [getChangePer,setGetChangePer] = useState(percent)let timer = null; // 定时器// 调起进度条const initial = () => {// 进度条步数let per = 0setGetChangePer(per)timer = setInterval(() => {          per += sif(per === 99) { // 在100之前要卡住停顿clearInterval(timer)}if(per + s >= 100) { // 最后一段改变步幅s = 1}setGetChangePer(per)}, 100);}// 响应失败const fail = () => {// 清除定时器clearInterval(timer) // 这里调用clearInterval了,但是定时器仍在运行}}

在 fail() 函数中调用 clearInterval 来清除定时器了, 但是发现定时器还在运行.

解决办法

把 timer 改成 useState 那种方式就可以了.

    const [timer,setTimer] = useState(null) // 定时器// 调起进度条const initial = async () => {// 进度条步数let per = 0setGetChangePer(per)let t = setInterval(() => {          per += sif(per === 99) { // 在100之前要卡住停顿clearInterval(t)}if(per + s >= 100) { // 最后一段改变步幅s = 1}setGetChangePer(per)}, 100);setTimer(t)}