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

最新推荐文章于 2025-04-20 19:45:06 发布

原创最新推荐文章于 2025-04-20 19:45:06 发布 · 4.1k 阅读

5 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

在React开发中遇到一个问题，即页面跳转后定时器仍在后台运行。解决办法是在跳转时清除定时器。通过判断DOM元素是否存在来决定是否关闭定时器，例如检查'main'元素，若不存在则调用`clearInterval`停止定时器。这样可以防止页面跳转后资源泄露。给出的代码示例展示了在`componentDidMount`中设置定时器，并在跳转时清理的方法。

1. 前言

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

2. 解决方案

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

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

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

               if(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秒刷新一次数据
    }