DOM元素load刷新后原来的多个定时器无法关闭问题

页面异步刷新后原来的多个定时器关闭问题

问题

之前做老师的外包项目,因为有些需要实时更新数据的Echarts图,所以我采用的轮询的操作,即在不同的页面放了不同的定时器,来定时发送ajax请求后台查询数据库并返回数据到前台进行处理。但是出现了这个问题。在点击菜单切换内容后,上个页面的定时器没有发生停止。意思就是,我们已经从A页面切换到了B页面,但是A的定时器并没有关闭,而此时B的定时器打开。而实际上,除了当前页面的定时器,后台可能还开有各种各样的页面的定时器,同一种类的可能还有好几个在频繁请求。

原因

仔细看了下之前别人写的index.jsp这个页面,之前还以为除菜单栏之外内容的刷新用的是内嵌iframe(实际上内嵌iframe在被刷新后原来的定时器是会关闭的),但是发现,内容的刷新用的方法是在js中对对div进行load(url),这样是更新了那个div,但是之前的js还在生效。

var tb = $("#loadhtml");
tb.load(rootPath + sn[2]);

解决方法

既然js还在生效,但是div里的内容改变了。那我就去找定时器对应的页面中特有的元素,发现这个元素找不到了(null),那么就说明页面被load了,也就可以关闭定时器了。

timer = setInterval(function () {
	// 不在这个页面的时候就清除定时器
    if (document.getElementById("container") === null) {
        clearInterval(timer);
    } else {
    	//方法体
    }
}, 1 * 1000);

在这里插入图片描述

发布了40 篇原创文章 · 获赞 94 · 访问量 9581

猜你喜欢

转载自blog.csdn.net/qq_41718454/article/details/102978731