js中的整点刷新页面

需求:页面需要刷新数据,因此得做一个刷新,刷新的要求是整点15分钟刷新,也就是00,15,30,45分钟的时候刷新接口,具体实现如下:

data() {
    return {
        timer: null,
    }
}
mounted() {
      let isRenovate = false;
      const that = this;
      this.timer = setInterval(() => {
         const currentData = new Date();
         const remainder = currentData.getMinutes().toString();
         const arr = ['00', '15', '30', '45'];

         if(!isRenovate && arr.includes(remainder)) {
            isRenovate = true;

            if(isRenovate) {
               // 此处是我刷新页面要调用的接口
               that.init();
            }
         }
         else if(!arr.includes(remainder)) {
            isRenovate = false;
         }
      }, 1000);
}
beforeDestroy() {
      clearInterval(this.timer);
},

完美结局!!!

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue实现整点倒计时自动刷新接口的功能,您可以使用Vue的计算属性、定时器和Vue的生命周期钩子函数。以下是一个示例代码: ```vue <template> <div> <p>下次刷新时间:{{ nextRefreshTime }}</p> </div> </template> <script> export default { data() { return { refreshTime: null, // 下次刷新时间 timer: null, // 定时器 }; }, computed: { nextRefreshTime() { if (this.refreshTime) { const currentTime = new Date(); return this.refreshTime > currentTime ? this.refreshTime.toLocaleTimeString() : '刷新...'; } else { return '未设置刷新时间'; } }, }, mounted() { this.setRefreshTime(); // 初始化设置刷新时间 this.startCountdown(); // 启动倒计时 }, beforeDestroy() { clearInterval(this.timer); // 组件销毁时清除定时器 }, methods: { setRefreshTime() { const currentTime = new Date(); const nextHour = currentTime.getHours() + 1; this.refreshTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate(), nextHour, 0, 0); }, refreshData() { // 执行接口刷新操作 // ... this.setRefreshTime(); // 刷新完成后重新设置刷新时间 }, startCountdown() { this.timer = setInterval(() => { const currentTime = new Date(); if (currentTime >= this.refreshTime) { this.refreshData(); } }, 1000); // 每秒检查一次是否到达下次刷新时间 }, }, }; </script> ``` 在这个示例,我们使用了一个`refreshTime`的数据属性来存储下次刷新的时间,并使用`timer`属性来存储定时器的引用。 在`setRefreshTime`方法,我们根据当前时间设置下次刷新时间为当前小时的下一个整点。在计算属性`nextRefreshTime`,我们根据当前时间和下次刷新时间的比较来显示不同的文本。 在组件的`mounted`钩子,我们初始化设置刷新时间并启动倒计时。倒计时使用`setInterval`定时器,每秒检查一次是否到达下次刷新时间,如果到达则执行接口刷新操作,并在刷新完成后重新设置刷新时间。 在组件销毁前的`beforeDestroy`钩子,我们清除定时器,以防止组件销毁后定时器仍然运行。 请注意,在示例的`refreshData`方法执行接口刷新操作的部分需要根据实际情况进行替换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值