需求
关闭弹窗时,需要把页面透传到组件中的定时器清除掉
问题发现
部分代码
const serviceModal: FC = () => {
// xxxx 一些操作
let timeoutTimer: any = null
timeoutTimer = setTimeout(() => {}, 3000)
// xxxx 一些操作
clearTimeout(timeoutTimer)
}
clearTimeout发现清除不掉,就在清除定时器的前后分别打印了一下timer,发现log出来的全都是undefined。
网上查询之后了解到:清除定时器,定时器的标识会在一瞬间变为 undefined , 但立马就会又重新开始执行定时器,而且定时器标识不变。所以无法清除定时器
原因
函数组件的本质是一个函数,而在在一个局部函数中,函数每一次执行,都会在把函数的变量重新生成一次。
本次解决方案
将定时器变量定义在函数组件外部(全局)
let timeoutTimer: any = null
const serviceModal: FC = () => {
// xxxx 一些操作
timeoutTimer = setTimeout(() => {}, 3000)
// xxxx 一些操作
clearTimeout(timeoutTimer)
}
其他解决方案
可将定时器放入state中,感兴趣的可以自己测试下