clearInterval清除定时器失效的原因

在本页面定义了一个定时器，离开页面的时候清除定时器，发现失效。
原因是在本页面的不同地方调用了这个定时器，最后清除的只是最后一次调用的定时器，之前的定时器都没有清除。

比如，我定义了一个定时器

getTimer(){this.timer = setInterval(() => {console.log('定时器')}, 2000)}

在刚进入页面的时候调用了一次

componentDidMount() {this.getTimer()
}

然后，在app处于active状态的时候又调用了一次

_handleAppStateChange = (nextAppState) => {if (nextAppState=='active' ) {this.getTimer();}this.setState({appState: nextAppState});
}

如果，停留在本页面的时候触发了_handleAppStateChange(),也就是二次调用的this.getTimer()
这样在卸载页面的时候使用clearInterval清除定时器，清除的只是_handleAppStateChange()方法里的定时器，并没有清除componentDidMount()里的定时器。

那么，我们应该怎么把所有的定时器都清除掉呢。
我的做法是，第一次正常调用定时器，第二次以以后的每一次调用定时器之前都将原来的定时器清除掉就可以了。

代码就可以写成
第一次正常调用

componentDidMount() {this.getTimer()
}

第二次在调用定时器之前，将原来的定时器用clearInterval清除掉就好了

_handleAppStateChange = (nextAppState) => {if (nextAppState=='active' ) {this.timer&&clearInterval(this.timer);this.getTimer();}this.setState({appState: nextAppState});
}

那么，在卸载本页面的时候，再清除一次定时器，所有的定时器都会被关闭掉。

async componentWillUnmount() {console.log('卸载')this.timer&&clearInterval(this.timer);
}

若有疑问，可留言！
如有帮助，可给请作者的一杯咖啡添砖加瓦：

clearInterval清除定时器失效的原因相关推荐

vue beforeDestroy clearInterval清除定时器失效
我发现遇到这个问题的人挺多的,自己遇到过,改别人代码的时候也遇到过,赶紧记下来~这方法好使~ 情景:路由跳转时触发了beforeDestroy,里面也写了清除计时器的相关代码,但是到其他页面时还是在一 ...
vue 清除定时器失效 clearInterval
最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效, 解决办法就是挂载到window上 this.timer = window.setInterval(() => { ...
vue中clearInterval()清除定时器报timeout.close is not a function错误？
在vue中实现播放音乐时旋转光碟的功能时候使用到了定时器,在暂停播放音乐的时候清除定时器,但是发现报了一个奇怪的错误: 在网上查了一下,发现报错的原因好像是vue中有自己内置的clearInterva ...
ajax清除定时器,clearInterval 清除定时器有时候会无效？
methods: { async init () { await this.getData(); this.setTimer() }, async getData() { //...ajax 获取数据 ...
JavaScript定时器与清除定时器
setTimeout定时器 window.setTimeout(调用函数,延时时间); 1.这个window在调用的时候可以省略 2.这个延时时间单位是毫秒但是可以省略,如果省略默认的是0 3.这个 ...
小程序离开当前页面时，清除定时器问题
一.小程序离开当前页面时,会遇到清除定时器失效问题解决方式: // pages/setInter/index.js Page({/*** 页面的初始数据*/data: {myInterv: '', ...
JS定时器与清除定时器
在js中我们很多时候都需要用到定时器,有以下两种方法 1.setInterval(函数名,时间间隔) 按照指定的周期(以毫秒计)来调用函数或计算表达式. <!DOCTYPE html> & ...
JS的定时器和清除定时器
在我们的项目开发中,难免会需要按周期执行一些代码,这就需要定时器这个功能. 常用的定时器有2种 setTimeout(function() {}, 1000); //一秒钟以后执行一次 setInte ...
React 函数组件中无法清除定时器问题
问题: 在离开当前组件页面后,清除定时器,定时器的标识会在一瞬间变为 undefined , 但立马就会又重新开始执行定时器,而且定时器标识不变. 原因: 函数组件的本质是一个函数,而在在一个局部函数 ...

clearInterval清除定时器失效的原因

clearInterval清除定时器失效的原因相关推荐

最新文章

热门文章