清除无效原因:
当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后,才触发的。【此定时器前面有一堆请求,等这堆请求完成之后,定时器才会被触发】
路由切换过快的时候,切换到了其他页面(page2,page3…)时,当前页面(page1)的beforeDestroy函数已经触发了,但是当前页面(page1)的定时器还没有触发。当切换到其他页面(page2,page3…)的时候,当前页面(page1)的定时器才执行。
此种情况下,定时器无法清除
解决方案:重点在于fetchingData1变量,当true时候,才去调用接口;当离开当前页面时候,需要清除定时器,那就将fetchingData1设置为false,就会阻断获取。
data() {return {timer1: null, // 定时器fetchingData1: true, // 控制是否获取数据的标志位}
},beforeRouteLeave(to, from, next) {clearInterval(this.timer1) // 清除定时器this.fetchingData1 = false; // 停止获取数据this.timer1 = null},
methods: {// 带宽(MB/s) - 2s定时器geCurrentCapacity(num) {this.fetchingData1 = true; // 开始获取数据const that = this;// 调用接口that.getChartData(num);// 接下来轮询this.timer1 = setInterval(function() {if (that.fetchingData1) { // 检查是否应该继续获取数据that.getChartData(num);}}, 2000);},
}