微信小程序学习Course 7 定时器功能

Posted #Cloud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序学习Course 7 定时器功能相关的知识,希望对你有一定的参考价值。

微信小程序学习Course 7 定时器功能

 

微信小程序中有一个定时器API函数,其提供了四个API接口

 

7.1、number setTimeout(function callback, number delay, any rest)

设定一个定时器,在定时到期以后执行注册的回调函数,值得注意的是本函数只执行一次!!!!

    setTimeout(this.DaoJiShi, 1000);//时间到达一秒执行一次DaoJiShi函数

  

如果我们想实现一个不停调用的函数,怎末实现呢?以下函数利用递归实现了一个倒计时功能,每隔一秒更新以下倒计时时间。

Onload:function(){    
    this.DaoJiShi();//执行DaoJiShi函数
    setTimeout(this.DaoJiShi, 1000);//设置每隔一秒执行一次倒计时函数。
}
//以下为倒计时函数声明
//值得注意的是函数末尾又调用了设定倒计时函数,实现了一个递归。不停的调用。
DaoJiShi:function(){
    let newTime = new Date().getTime();
    let endTime = new Date(this.data.actEndTimeList).getTime();
    //console.log(endTime);
    //console.log(newTime);
    //console.log(endTime - newTime);
    if(endTime-newTime > 0){//如果未达到时间
      let Time = (endTime - newTime)/1000;//换算时间
      let day = parseInt(Time / 3600 / 24) ;
      let hou = parseInt((Time % (3600 * 24) /3600));
      let min = parseInt((Time %3600) / 60);
      let sec = parseInt((Time % 3600) % 60);
      this.setData({ DaysRemain: day, HourRemain: hou, MinuteRemain: min, SecondRemain: sec });
    }else{
      this.setData({ DaysRemain: \'0\', HourRemain: \'0\', MinuteRemain: \'0\', SecondRemain: \'0\' });
    }
    setTimeout(this.DaoJiShi, 1000);
  },

  

7.2、clearTimeout(number timeoutID)

可取消由 setTimeout() 方法设置的定时器。此函数是与setTimeout() 所对应的函数。二者搭配可以设置一个闹钟,定时器设定函数可以设置多长时间后响铃,如果想提前取消闹铃则可以适应clear函数取消定时器设置。

 

7.3、number setInterval(function callback, number delay, any rest)

设定一个定时器,按照指定的周期(以毫秒计)来执行注册的回调函数。注意此函数是按照一定周期去调用回调函数的,所以对于上述倒计时显示的任务,我们也可以采取此函数来实现,而且这样更加方便。

 onLoad(){ 
    this.DaoJiShi();
    //setTimeout(this.DaoJiShi, 1000);
    setInterval(this.DaoJiShi,1000);
  },

  DaoJiShi:function(){
    let newTime = new Date().getTime();
    let endTime = new Date(this.data.actEndTimeList).getTime();
    //console.log(endTime);
    //console.log(newTime);
    //console.log(endTime - newTime);
    if(endTime-newTime > 0){//如果未达到时间
      let Time = (endTime - newTime)/1000;//换算时间
      let day = parseInt(Time / 3600 / 24) ;
      let hou = parseInt((Time % (3600 * 24) /3600));
      let min = parseInt((Time %3600) / 60);
      let sec = parseInt((Time % 3600) % 60);
      this.setData({ DaysRemain: day, HourRemain: hou, MinuteRemain: min, SecondRemain: sec });
    }else{
      this.setData({ DaysRemain: \'0\', HourRemain: \'0\', MinuteRemain: \'0\', SecondRemain: \'0\' });
    }
    //setTimeout(this.DaoJiShi, 1000);
  },

  

 

7.4、clearInterval(number intervalID)

可取消由 setInterval() 方法设置的定时器。

 

利用定时器可以完成一个倒计时的功能,代码在上面已经展示各位可以尝试一下。

 

以上是关于微信小程序学习Course 7 定时器功能的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序学习Course 2 事件

微信小程序添加闹钟代码

微信小程序学习Course 4-2 JS数组对象学习

微信小程序学习Course 3-3 JS时间类型学习

7-微信小程序 模板(template)

最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习