使用setInterval實現倒計時功能

平常項目開發過程當中，經常有使用定時器實現倒計時功能的需求。本文將介紹如何經過使用setInterval實現倒計時功能。

項目中倒計時的使用場景：

1. 發送驗證碼後60秒倒計時，具體倒計時長由前端控制。轉換後的輸出格式爲：xx秒後重試
2. 促銷活動倒計時，一般由後臺返回結束時間戳。轉換後的輸出格式爲：xx天xx小時xx分xx秒

根據以上需求進行任務拆分：

1. 場景1，只須要進行每秒減一操做便可
2. 場景2，除了須要進行每秒減一操做，還須要在減一操做後，進行日期格式轉換。

日期格式轉換代碼以下：

/** * 日期轉換 把倒計時總秒數轉換爲「0天0小時0分0秒」的格式 * @param {*} seconds 總秒數 * @returns String xx天xx小時xx分xx秒 */
function dateTransform(seconds) {
  let [day, hour, minute, second] = [0, 0, 0, 0] // 初始化
  if (seconds > 0) {
    day = Math.floor(seconds / (60 * 60 * 24))
    hour = Math.floor(seconds / (60 * 60)) - day * 24
    minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60
    second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
  }
  // 小於10的，在前面加0
  day = day < 10 ? '0' + day : day
  hour = hour < 10 ? '0' + hour : hour
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return day + '天' + hour + '小時' + minute + '分' + second + '秒'
}
複製代碼

倒計時定時器代碼以下

/** * 倒計時 * @param {*} type 類型 0-給定具體多少秒倒計時（默認）；1-給定目標結束時間戳，單位爲秒，目標是轉換爲「xx秒後結束」的格式 * @param {*} timestamp 當type==0時表示具體秒數，默認60；type==1時爲目標結束時間戳，目標是轉換爲「xx天xx小時xx分xx秒」的格式 */
function countDown(timestamp = 60, type = 0) {
  let seconds = timestamp // 倒計時總秒數
  if (type == 1) {
    let currentTimestamp = Math.round(new Date() / 1000) // 當前時間戳，單位秒
    seconds = timestamp - currentTimestamp
  }

  // 若是目標時間小於等於當前時間，不須要繼續進行了
  if (seconds <= 0) return

  // 定時器
  let timer = setInterval(() => {
    seconds--
    let result = type == 0 ? seconds + '秒後可重發' : dateTransform(seconds)
    console.log(result)

    // 把轉換後的結果顯示出來
    document.getElementById('countDown').innerHTML = result

    if (seconds <= 0) {
      clearInterval(timer)
      console.log('倒計時結束，清除定時器，避免內存溢出')
    }
  }, 1000)
}
複製代碼

效果以下：

若是僅僅須要實現場景1：60秒倒計時功能，能夠把代碼精簡以下：

/** * 倒計時 * @param {*} seconds 倒計時長 默認60秒 */
function countDown(seconds = 60) {
  // 定時器
  let timer = setInterval(() => {
    seconds--
    let result = seconds + '秒後可重發'
    console.log(result)

    // 把轉換後的結果顯示出來
    document.getElementById('countDown').innerHTML = result

    if (seconds <= 0) {
      clearInterval(timer)
      console.log('倒計時結束，清除定時器，避免內存溢出')
    }
  }, 1000)
}
複製代碼

效果以下：

注意點：

1. 倒計時結束後，必定要清除定時器，不然可能會致使內存溢出