VUE 和 setInterval 使用记录

VUE 很好用,但是对有些方法支持起来有些坑
比如常用的 setInterval

这个方法一般会用来做一个倒计时,比如点击发送验证码后 的倒计时

这个对象是在window 下的方法,在与vue配合的时候有些问题需要注意一下

第一,为了要停止计时 我们需要把 setInterval 赋值给一个变量 为了之后用 clearInterval()停止计时;
这个变量 不能用 vue 中的 data 来管理,如果使用在之后调用停止的时候无法停止,解决方法

beforeCreate : function(){
                window.intervalObj="";
            },

VUE2.0的一个生命周期钩子,可以在这里给window定义一个全局的变量,
在之后调用setInterval 时赋值给这个变量即可

第二,在 setInterval 中调用的方法可以用vue 的 methods管理,但是在之后调用的时候,不能使用this去调用 即便转换变量

let _that=this;

把vue对象转成安全变量也不行,这里需要使用vue的实例名称,就是在new vue时的变量.方法名才可以,说了这么多最后上个倒计时的代码啦

let doRegister = new Vue({
      el: '#doRegister',
      data: {
        sjyzmBtnText:'获取验证码'
      },
      beforeCreate : function(){
        //@@
        window.intervalObj="";
      },
      methods:{
        begin : function(){
            //@@
          window.intervalObj=setInterval("doRegister.countdown()",1000);
        },
        countdown :function(){
            let phongCount=this.sjyzmBtnText
            if(phongCount=="获取验证码"){
              this.sjyzmBtnText=60;
            }else if(phongCount==0) {
              this.sjyzmBtnText="获取验证码";
              getPhoneCodeIs=true;
              //@@
              clearInterval(intervalObj);
            }else{
              this.sjyzmBtnText=this.sjyzmBtnText-1;
            }

          }
      }
  });
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js是一个用于构建用户界面的开源JavaScript框架,可以简化开发过程并提高开发效率。百度地图JS API是百度地图提供的一套JavaScript API,可以在网页集成地图功能。轨迹回放是指根据已经记录的轨迹数据,将轨迹在地图上以动画的形式重新播放出来。 在Vue使用百度地图JS API进行轨迹回放,首先需要在Vue项目引入百度地图的JS文件,并在Vue实例的mounted钩子函数初始化地图。 在获取到轨迹数据后,可以使用百度地图提供的Polyline类创建一个折线对象,并将轨迹点添加到折线对象。然后使用地图的addOverlay方法将折线对象添加到地图上,实现轨迹的显示。 为了实现轨迹的回放效果,可以使用Vue的定时器函数setInterval来定时改变折线对象的显示范围,从而实现轨迹的动画效果。可以通过设置折线对象的路径切片来控制每次显示的轨迹点数量,并随着时间的推移逐渐增加显示的点数,从而实现回放效果。 同时,为了提高回放的流畅度和体验,可以使用百度地图提供的动画效果类Effect来给轨迹点添加动画效果,比如平滑移动、旋转等,使得轨迹回放更加真实。 总而言之,利用Vue和百度地图JS API,可以很方便地实现轨迹回放功能。通过初始化地图、创建折线对象、定时改变折线对象的显示范围,再加上动画效果的设置,就能够实现一个带有回放功能的轨迹展示页面。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值