关于React跳出当前页面时，如何清除该页面的定时器解决方案

目录

• ​​1. 前言​​
• ​​2. 解决方案​​
• ​​3. 效果展示​​
• ​​4. 参考文献​​

1. 前言

在使用React框架做项目的时候，出现了一个问题，就是我在当前界面使用定时器实现动态展示，然后当前页面定时器还未结束我就跳转到另外一个界面，让后出现下面这种情况：

2. 解决方案

针对这种情况，我网上找了些参考资料，是这样解释的：

当页面跳转的时候，事实上我们已经获取不到页面的dom元素了，
但是他的js还在继续执行，所以我们就可以通过这个方式解决问题
（当获取不到页面的dom时就给他清除定时器）。

所以我们只需要在页面跳转的时候将定时器清楚即可。在定时器那里加上这句代码：

(document.getElementById('main') === null){  // 跳转至其他界面需要关闭定时器
                   console.log("这里为关闭界面")
                   window.clearInterval(this.timer);
                   return;
               }

这面给个我的部分代码，给大家参考下：

componentDidMount() {
        let i = 0;
        this.initMap(0, 10520, 0, 10520,0) // 初始时显示第一条数据
        this.initMap1(0, 0.5, 0.5)
        this.initMap2(0,10520, 10520)
        this.timer = setInterval(() => {
           if(flag){
               if(document.getElementById('main') === null){  // 跳转至其他界面需要关闭定时器
                   console.log("这里为关闭界面")
                   window.clearInterval(this.timer);
                   return;
               }
               i++;
               if (i == ml.length - 1) { // 数据读取完毕的时候将定时器去除
                   clearInterval(this.timer);
               }
               this.initMap(ml[i].dd, ml[i].num[0], ml[i].num[1], ml[i].num[2], ml[i].num[3]);
               this.initMap1(ml[i].dd, ml[i].tr, ml[i].te);
               this.initMap2(ml[i].dd, ml[i].member[0], ml[i].member[1]);
           }

        }, 2000) // 设置定时器每隔2秒刷新一次数据
    }

3. 效果展示

4. 参考文献

​​1. react跳出当前页面时，如何清除该页面的定时器​​