华山资源网

VUE简单的定时器实时刷新的实现方法
网络编程 2024/11/18 佚名
3 1

说明：我只是一个刚入门的小前端，你们可以指导我，但千万不要喷我，虽然我知道我很垃圾！人吗，都是要成长的！大佬，请多多指教！！！

我前段时间刚刚写了一个类似余股票的项目，上边的K线图是要实时去刷新的，所以要用vue做一个心跳，当然大家也可以选择用websocket，大佬们感觉肯定很简单，但是我只是一个刚入门的小前端，特此记录一下。

思路

其实思路很简单，首先要了解vue的生命周期和vue的内置函数，其思路就是先定义一个定时器，然后去定时请求后台，到最后关闭这个定时器，哈哈，是不是都是废话，但是确实如此，你们可以先去尝试一下。

这个小功能实现的自我总结

一开始我感觉很简单，不就是个心跳吗，在methods 中定义一个timer函数返回一个setInterval和一个getData函数，在timer中调用getData， 然后在created中去调用，其中就会有一个问题，就是刚进来页面不会有数据，为什么想必大家肯定会知道，就是这是调用了一个定时器只有时间到了以后才会去请求后台，这个不是很好解决吗，在created 中在调用一次getData不就好了吗，嗯，我就这样做了，虽然我感觉不是很合理，啊啊啊啊，好烦，第一次写不知道如何写，还是用代码来表达，这样比较清楚........

第一版，这样很不合理，因为这样会加载页面发送两次数据，而且还有一个很大的雷，就是setInterval在网页卸载是不会关掉，而且你再次进入这个页面时，定时器会加速，这个BUG应该是因为vue切换页面不会刷新的原因吧，请大佬指教。

<script>
  export default {
    created() {
      this.timer()
      this.getData()
    }
    methods: {
      // 这是一个获取数据
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setInterval(()=>{
          this.getData()
        },5000)
      }
    },
    destroyed() {
  clearInterval(this.timer)
    }
  }
</script>

第二版，我进行了改进，我把setInterval换成了setTimeout，因为setTimeout只执行一次，所以要靠函数去驱动它，然后我用到了updated，它也有一个弊端，就是有某一个数据更新，它就会触发，所以有时会执行多次。

<script>
  export default {
    created() {
      this.getData()
    }
    methods: {
      // 这是获取数据的函数
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setTimeout(()=>{
          this.getData()
        },5000)
      }
    },
    updated() {
     this.timer() 
    }
    destroyed() {
  clearTimeout(this.timer)
    }
  }
</script>

最终版

监听list只要它变化就去触发定时器，这样就解决了updated的多次触发。

<script>
  export default {
    data() {
      return {
        list: []  // 获取的数据列表
      }
    }
    created() {
      this.getData()
    }
    methods: {
      // 这是获取数据的函数
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setTimeout(()=>{
          this.getData()
        },5000)
      }
    },
    watch: {
      list() {
      this.timer() 
      }
    }
    destroyed() {
  clearTimeout(this.timer)
    }
  }
</script>

总结

主要就是要了解vue的钩子函数。可能漏洞很多，希望大佬多多指教，还有就是第一次写，有点词穷，请大家多多担待。、

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com