最近在自己的react项目中使用到了setInterval,不过由于种种原因出现很多bug,在这里总结一下
项目场景
点击一个开关后在间隔固定的时间段内连续发送请求,获取新的数据,关闭开关后就关闭定时器,不在发送请求,说到这里很多人大脑中应该都有了对应的解决方案了,我当时也是有自己的解决方案了,可是在实际写的过程中却遇到不少的问题
当时我是根据一个state状态来判断开启与关闭定时器,所以有了以下的代码
functions fn(){
let a = undefined;
if(this.state.isStart) {
a = setInterVal(() => {
// 数据请求
this.props.onDidMount();
}, 30000);
}else {
clearInterVal(a);
}
}
复制代码
大致一看觉的没什么问题,调用方法时先给a初始化,然后判断,如果值为true则开启定时器,否则清楚定时器,但是这里有个问题,如果不为true,是会清理定时器,但是此时的a真的是需要清理的定时器么?也就是说每次清理的并不是定时器,是一个undefined,下面的代码就正常了
functions fn(){
if(this.state.isStart) {
window.a = setInterVal(() => {
// 数据请求
this.props.onDidMount();
}, 30000);
}else {
clearInterVal(window.a);
}
}
复制代码
这里不管怎么调用,每次清理的都是定时器,将a提升到了全局变量中