vue 定时器定时请求接口,当在网站切换页面或者浏览器切换页面清除定时器

1、浏览器切换页面,监听document的显示和隐藏

 	addEventListenerVisibilitychange() {
      document.addEventListener("visibilitychange", this.eventHandle);
    },
    removeEventListenerVisibilitychange() {
      document.removeEventListener("visibilitychange", this.eventHandle);
    },
    eventHandle() {
      if (document.hidden) {
        //页面隐藏,清除定时器
        clearInterval(this.timer);
      } else {
        //页面显示,重新加载首页
        this.reloadFun();
      }
    },
    reloadFun() {
      this.search(this.params, this.timeTypeName, 1);
      this.addEventListenerVisibilitychange();
    },

2、切换网站页面时,监听keep-alive的钩子

  activated() {
    this.reloadFun();
  },
  deactivated() {
    clearInterval(this.timer);
    this.removeEventListenerVisibilitychange();
  },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用`setInterval`函数和`vue-router`中的导航守卫来实现页面定时切换。 首先,在Vue组件中使用`setInterval`函数,每隔一定时间触发页面跳转: ```javascript export default { data() { return { intervalId: null, pageList: ['/home', '/about', '/contact'] // 需要轮播的页面列表 } }, mounted() { this.intervalId = setInterval(() => { const currentPageIndex = this.pageList.indexOf(this.$route.path) const nextPageIndex = (currentPageIndex + 1) % this.pageList.length this.$router.push(this.pageList[nextPageIndex]) }, 5000) // 每隔5秒钟跳转到下一个页面 }, beforeDestroy() { clearInterval(this.intervalId) } } ``` 上面的代码中,我们定义了一个`pageList`数组,其中存放需要轮播的页面路径。然后在`mounted`钩子函数中使用`setInterval`函数,每隔5秒钟触发一次页面跳转。在跳转之前,我们通过`indexOf`方法获取当前页面在`pageList`数组中的索引,并计算出下一个页面的索引。然后通过`$router.push`方法跳转到下一个页面。 为了防止组件被销毁时定时器仍然在运行,我们在`beforeDestroy`钩子函数中清除定时器。 最后,我们还需要在`vue-router`中使用导航守卫,确保页面跳转时定时器正常工作: ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] }) router.beforeEach((to, from, next) => { clearInterval(this.intervalId) // 清除定时器 next() }) router.afterEach(() => { this.intervalId = setInterval(() => { const currentPageIndex = this.pageList.indexOf(this.$route.path) const nextPageIndex = (currentPageIndex + 1) % this.pageList.length this.$router.push(this.pageList[nextPageIndex]) }, 5000) // 重新启动定时器 }) ``` 上面的代码中,我们在`beforeEach`导航守卫中清除定时器,确保页面跳转时定时器不会继续运行。在`afterEach`导航守卫中重新启动定时器,确保页面跳转完成后定时器能够正常工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值