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