1. 程式人生 > >微信小程序學習Course 7 定時器功能

微信小程序學習Course 7 定時器功能

換算 ava 而且 tint 毫秒 src ole 時間 技術

微信小程序學習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 定時器功能