微信小程序一招解決倒計時

針對一個頁面列表中多個倒計時的難題

解決思路： 計時器單放一個數組，由於要實時操做，避免列表數據過大操做太笨重。 根據計時器列表的index 與列表數據的 index 相對，去找到本身對應的倒計時器。 頁面刷新數據時要先 清除全部定時器 ，再從新加載，否則會出現連跳或者秒數來回跳動的問題。

// data裏聲明  
timerList: [],
allTimerList: []

// js 傳入秒數 與 index
timerhandle(timeSeconds,index){
    if (timeSeconds){
      this.setData({
        ['timerList[' + index + ']']: [parseInt(timeSeconds/60/60%24), parseInt(timeSeconds/60%60), parseInt(timeSeconds%60)]
      },()=>{
        let timer = setInterval(() => {
          timeSeconds--
          // 倒計時到0，能夠加入自定義函數處理
          if (timeSeconds <= 0) {
            clearInterval(timer)
          }
          this.setData({
            ['timerList[' + index + ']']: [parseInt(timeSeconds / 60 / 60 % 24), parseInt(timeSeconds / 60 % 60), parseInt(timeSeconds % 60)]
          })
        }, 1000)
        let ll = this.data.allTimerList
        ll.push(timer)
        this.setData({ allTimerList: ll })
      })
    }else{
      this.setData({
        ['timerList[' + index + ']']: ['00','00','00']
      })
    }
    
  },
  // 清除定時器
  clearAllTimer() {
  	 this.data.allTimerList.forEach((el, index) => {
        clearInterval(el)
      })
      this.setData({ allTimerList: [], timerList: [] },()=>{
		
      })
  }
複製代碼