vue写的用来大屏显示的单页面,用chrome打开,为什么没过多久就会卡死不动?

professor丶 发布于 09/22 15:01
阅读 1K+
收藏 1
<script>
import axios from "axios";
export default {
  name: "Facility",
  data() {
    return {
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      equipmentTable: [],
      timer: "",
    };
  },
  methods: {
    fetch() {
      this.$axios({
        method: "get",
        url: "/api/facility",
      })
        .then((response) => {
          this.equipmentTable = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    const timer = setInterval(() => {
      this.fetch();
    }, 10000);
    this.$once("hook:beforeDestory", () => {
      clearInterval(timer);
    });
  },
};
</script>

上面是js代码部分,使用setInterval10秒向后端请求一次数据,这边也使用了clearInterval进行了清除,但是还是会出现页面卡顿,不知道是不是自己写的不对,还是哪里的问题,或者是chrome浏览器哪里需要修改,希望大神给我指点一下,小弟菜鸟,感激不尽!!!

加载中
3
saileidigi
saileidigi

不要使用setInterval,当fetch用时间加上其他循环时间大于setInterva等待l时间时,程序完蛋了。请使用setTimeout加自调

0
s
shawn_lu

10秒太快了吧,建议5分钟或者10分钟

0
s
shawn_lu
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
    }
  },

 

0
爱敲代码的程序员
爱敲代码的程序员

试试每一次执行的时候先clear清除,然后再重新设置一次

0
中控易动
中控易动
destoryed(){
clearInterval(this.timer)
}
0
hmh
hmh

把代码写在 created 里就好了。
mounted 会触发多次的。

0
SmallTeddy
SmallTeddy

mounted改成created

0
火眼金睛容嬷嬷
火眼金睛容嬷嬷
js里面的这两个时间都不是精确执行的,一旦插不进去,就可能拥堵了。想不卡,timeout one by one地执行,另外,把可能阻塞的东西放到worker去
0
bug操手
bug操手

1. fetch请求一次时长是多少,会不会导致多个密集修改 equipmentTable

2. fetch请求回来的数据量是多少

3. 其他逻辑

4. 使用chrome做performance调优

返回顶部
顶部