React 组件中无法清除定时器问题记录

React 组件中无法清除定时器问题记录

• 需求
• 问题发现
• 原因
• 本次解决方案
• 其他解决方案

需求

关闭弹窗时，需要把页面透传到组件中的定时器清除掉

问题发现

部分代码

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中，感兴趣的可以自己测试下