js implementation of SMS verification code countdown example sharing

#1. After the target obtains the verification code, the button displays a countdown to resend, and the button becomes available again after the countdown ends. This article mainly shares with you an example of using js to implement SMS verification code countdown. I hope it can help you.

2. The two key APIs used

are executed every second: setInterval

##Execute after the specified time: setTimeout

3. Code

function createTimer(time,interval,timeout){

  let hasStartTime = 0//已经走了的时间
  interval(hasStartTime)//立即执行一次
  let _interval = setInterval(()=>{
    hasStartTime = hasStartTime+1000
    interval(hasStartTime)
  }, 1000)
  setTimeout(()=>{
    clearInterval(_interval)
    timeout()
  }, time || 60000)
}

Copy after login

where time is the total time set and interval is each The operation is performed in seconds, and timeout is the operation performed after the time is over. Remember to cancel the operations performed every second after the countdown is over.

The caller only needs to pass in the content to be refreshed every second. For example

let time = 10000
createTimer(time,timeStart=>{
    let btn_text = `重新发送(${(time- timeStart)/1000}s)`
    let btn_lock = true
  },()=>{
    let btn_text = `重新发送`,
    let btn_lock = false
  })

js implements SMS verification code countdown function

Develop SMS verification code sending function in Laravel "Specification" (picture)

JS implementation of sample code sharing to obtain SMS verification code and countdown function when user registers

The above is the detailed content of js implementation of SMS verification code countdown example sharing. For more information, please follow other related articles on the PHP Chinese website!