使用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. 倒计时结束后，一定要清除定时器，否则可能会导致内存溢出