Use setInterval to implement the countdown function

In the process of daily project development, there is often a need to use timer to realize the function of countdown. This article shows you how to implement the countdown function using setInterval.

The use scenario of countdown in the project:

1. 60 seconds countdown after sending the verification code, the specific countdown length is controlled by the front end. The output format after conversion is:Try again after xx seconds
2. Countdown to a promotional event, usually by returning the end time stamp from the background. The output format after conversion is:Xx days xx hours xx minutes xx seconds

Split tasks according to the above requirements:

1. In scenario 1, you only need to subtract one per second
2. Scenario 2, in addition to subtracting by one per second, requires a date format conversion after subtracting by one.

The date format conversion code is as follows:

* @param {*} seconds total number of seconds * @RETURNS String XX days xx hours XX minutes XX seconds */
function dateTransform(seconds) {
  let [day, hour, minute, second] = [0.0.0.0] / / initialization
  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
  }
  If less than 10, add 0 in front of it
  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 + 'day' + hour + 'hour' + minute + 'points' + second + '秒'
}
Copy the code

The countdown timer code is as follows

/** * countdown * @param {*} type type 0- Given a specific number of seconds countdown (default); * @param {*} timestamp Indicates the specific number of seconds when type==0, default is 60; When type==1, the target end timestamp is converted to the format of "xx days xx hours XX minutes xx seconds" */
function countDown(timestamp = 60, type = 0) {
  let seconds = timestamp // The total number of seconds counted
  if (type == 1) {
    let currentTimestamp = Math.round(new Date(a) /1000) // Current timestamp, in seconds
    seconds = timestamp - currentTimestamp
  }

  // If the target time is less than or equal to the current time, no need to continue
  if (seconds <= 0) return

  / / timer
  let timer = setInterval((a)= > {
    seconds--
    let result = type == 0 ? seconds + 'Retransmission in seconds' : dateTransform(seconds)
    console.log(result)

    // Display the converted result
    document.getElementById('countDown').innerHTML = result

    if (seconds <= 0) {
      clearInterval(timer)
      console.log('Countdown ends, clear timer to avoid memory overflow')}},1000)}Copy the code

The effect is as follows:

If you only need to implement the scenario 1:60 second countdown function, you can simplify the code as follows:

/** * countdown * @param {*} seconds Countdown length default 60 seconds */
function countDown(seconds = 60) {
  / / timer
  let timer = setInterval((a)= > {
    seconds--
    let result = seconds + 'Retransmission in seconds'
    console.log(result)

    // Display the converted result
    document.getElementById('countDown').innerHTML = result

    if (seconds <= 0) {
      clearInterval(timer)
      console.log('Countdown ends, clear timer to avoid memory overflow')}},1000)}Copy the code

The effect is as follows:

Note:

1. After the countdown, be sure to clear the timer; otherwise, memory overflow may occur