vue项目中实现倒计时预约功能

先看效果:

 vue项目中实现倒计时预约功能_第1张图片

 

最近,公司提出一个新的需求,需求如下:

1.实现可预约功能,比如:会议室在8:00开放,但是6:00的时候就可以预约

2.要求我做一个按钮,在按钮内显示倒计时等内容

3.预约时间需要分成三段:

    (1) 超出2小时,显示可预约的时间段

                (显示预约时间)

    (2)2小时以内的,以倒计时的方式显示

                        (倒计时的方式)

    (3)预约时间已过的,显示点击预约

                     (点击预约即可)

想法:

        接到需求后,一直在思考怎么写,考虑到循环展示,并且数据实在不同的选显卡切换时显示,所以如果要实现上面的需求,就需要在请求方法中写一个定时器,让定时器每隔一秒钟更新现在时间与开放预约时间的时间差(就叫它:倒计时时间戳)。原来的想法是在获取的数据里面,循环添加一个新的cutdown属性,用来实时显示倒计时时间戳,但是写的过程中发现,展示的数据是死的,需要每隔1秒请求接口,这样实在太损耗性能了。

       于是,逆向思维想了一下,反正我当前时间是实时变化的,不如我每隔一秒更新当前时间以取代更新接口请求的数据,不就可以了嘛,这样就可以减少调接口的次数,优化了性能。

// 定时器,每隔 1秒 更新倒计时时间戳
const timer = setInterval(() => {
        data.forEach(item=>{
          // openingTime 是开放预约的时间
          item.cutdown = new Date(item.openingTime) - new Date()
          // this.countTime() 是在外面定义的时间格式
          item.time = this.countTime(item.cutdown)
          // 强制刷新局部页面
          this.$forceUpdate()
        })
      }, 1000);

        后期,又遇到了清空定时器的问题,因为我每次切换选项卡都需要调接口,这样每次都会增加定时器,所以,我需要在调接口的时候,上来就应该清空一次定时器,然后再创建。

        其次,我在进行页面跳转的时候,在vue的beforeDestroy里面清空定时器,没有效果,也是值得讨论的。

不多说,上部分完整代码~

//获取当天指定课程的开放安排
    getData() {
       // 接口,获取数据
       getCurse().then((res) => {
          // 这是在data里面定义的变量来接受数据
          this.arrangementsArray = res.data;
        }
      });
      // 每次请求时,先清空定时器
      if(this.timer!==null){
        clearInterval(this.timer)
      }
      // 定时器,每隔 1秒 更新倒计时时间戳
      this.timer = setInterval(() => {
        this.arrangementsArray.forEach(item=>{
          // openingTime 是开放预约时间
          item.cutdown = new Date(item.openingTime) - new Date()
          item.time = this.countTime(item.cutdown)
          // 强制刷新局部页面
          this.$forceUpdate()
        })
      }, 1000);
      // 路由跳转时,清空定时器
      this.$once('hook:beforeDestroy', () => {            
        clearInterval(this.timer);                                    
      })
    },
// 将时间秒数转为时间戳
    countTime(time){
      let times = time/1000
      let t = this
      let h,m,s
      h = Math.floor(times/60/60);  
      m = Math.floor(times/60%60);  
      s = Math.floor(times%60);
      let msg=t.repair(h)+':'+t.repair(m)+':'+t.repair(s);
      return msg
    },
// 补零
    repair(o){
      let x=o;
      let t=x > 9 ? x : '0' + x
      return t
    },

你可能感兴趣的:(vue.js,前端,javascript)