Question

在我的页面中，我有一个实时图表，每隔3秒更新一次我使用setInterval（function（）{...}，3000）来更新图表。但我的问题是，当我移动到另一个页面（通过javascript）时，除了我的间隔之外，每个东西都被销毁，所以当我回到图表页面时，它再次加载每个东西并且setInterval方法每3秒工作两次，这使得重复的点上mu chart。

这是破坏方法除myInterval之外的每一行都有效

    destroy()
    { this.num=0;
      this.c=0;
      this.startLive = false;
      clearInterval(this.myInterval); }

当我转到另一页然后回来时，我的问题就出现了。

<template>
   ....
</template>
<script>
    var charts = [];
    export default {
        data() {
            return {
                startLive: false,
                num: 0,
                c: 0,
                myInterval: null,
            }
        },
        methods: {
            initChart(dataProvieded) {
                charts[this.num] = AmCharts.makeChart("chart" + this.num, {...});
            },
            loadInitalData(limit) {
                this.fetchDatafromServer(limit).then((response) => { ...
                    this.initChart(data);
                    this.num++;
                    this.setInt();
                });
            },
            setInt() {
                this.myInterval = setInterval(function() { .... } , 3000);
            },
        }
        destroy() {
            this.num = 0;
            this.c = 0;
            this.startLive = false;
            clearInterval(this.myInterval);
        }
</script>

Answer 1

很奇怪，尝试在clearInterval之前设置debugger;来检查变量。

顺便说一下，并非所有代码路径都可以（看起来像初始化加倍）。

你应该重写为

if (this.myInterval !== null) {
    clearInterval(this.myInterval);
    this.myInterval = null;
}

并在setInt中添加相应的后卫：

setInt() {
    if (this.myInterval === null ) {
        this.myInterval = setInterval(function() { .... } , 3000);
    }
}

每个图表可能需要一个间隔，请检查您的逻辑。

如何销毁当前页面的所有数据

1 个答案: