RN 多个定时器器运行卡顿处理

bug场景:

在某业务场景中需要通过验证码 验证手机号,邮箱号准确性,点击发送验证码后倒计时展示秒数,但是在两个倒计时开启的时候会出现很神奇的场景,一个定时器卡了,另一个定时器到重复展示数字.

调试场景:

两个定时器独立开启不会相互干扰,一起开了就会相互干扰;看代码这两个定时器是局部变量, 到点清除定时器无法进行下去.

RN运行基于JavaScript javascript是单线程来运行,而原生模块在互动和动画的过程中避免繁重的操作所以就会显得很流畅.

看核心代码:

这里设置一个循环定时器每隔1秒将计数器减1并展示在控件text上,到点就清除循环定时器,还原title获取验证码.

 

timer = setInterval(() => {

 

this.count = this.count - 1

 

if (this.count <= 0) {

 

timer && clearTimeout(timer);

 

this.count = 60

 

this.setState({title :global.t('获取验证码')})

 

} else {

this.setState({title:this.count})

 

}

}, 1000);

修改如下将timer设置成全局变量那么就可以了

this.timer = setInterval(() => {

 

this.count = this.count - 1

 

if (this.count <= 0) {

 

this.timer && clearTimeout(this.timer);

 

this.count = 60

 

this.setState({title :global.t('获取验证码')})

 

} else {

this.setState({title:this.count})

 

}

}, 1000);

JS中循环定时器是间隔时间内执行回调函数,局部变量定时器作用域就在被限定在回调函数内,如果多个局部变量定时器开启的时候,在线程中进行排队,第一个执行完毕后发现后面的的定时器还没执行完毕,InteractionManager会判定定时器第一个还没执结束,会挂起第二个循环定时器,交互表现为第循环执行,第二个定时器卡顿;如果换成全局变量那么InteractionManager会判别这第一个定时器执行结束后,取出任务,第二个定时器继续执行.

参考资料:

https://reactnative.cn/docs/timers/#docsNav

https://www.jb51.net/article/45215.htm

https://blog.youkuaiyun.com/lqadam/article/details/53786186

https://blog.youkuaiyun.com/runnerred/article/details/78863403