js-Implementierung der SMS-Bestätigungscode-Countdown-Beispielfreigabe

1 Nachdem das Ziel den Bestätigungscode erhalten hat, zeigt die Schaltfläche einen Countdown zum erneuten Senden an und die Schaltfläche wird nach Ablauf des Countdowns wieder verfügbar. In diesem Artikel wird hauptsächlich ein Beispiel für die Verwendung von js zur Implementierung des SMS-Bestätigungscode-Countdowns vorgestellt. Ich hoffe, es kann Ihnen helfen.

2. Die beiden verwendeten Schlüssel-APIs

werden jede Sekunde ausgeführt: setInterval

Nach der angegebenen Zeit ausführen: setTimeout

3. Code

<span style="font-size: 14px;">function createTimer(time,interval,timeout){<br/><br/>  let hasStartTime = 0//已经走了的时间<br/>  interval(hasStartTime)//立即执行一次<br/>  let _interval = setInterval(()=>{<br/>    hasStartTime = hasStartTime+1000<br/>    interval(hasStartTime)<br/>  }, 1000)<br/>  setTimeout(()=>{<br/>    clearInterval(_interval)<br/>    timeout()<br/>  }, time || 60000)<br/>}<br/></span>

wobei time die eingestellte Gesamtzeit und das Intervall ist Der Vorgang wird jede Sekunde ausgeführt, und Timeout ist der Vorgang, der nach Ablauf der Zeit ausgeführt wird. Denken Sie daran, die ausgeführten Vorgänge jede Sekunde nach Ablauf des Countdowns abzubrechen.

Der Anrufer muss nur den Inhalt übergeben, der jede Sekunde aktualisiert wird. Zum Beispiel

<span style="font-size: 14px;">let time = 10000<br/>createTimer(time,timeStart=>{<br/>    let btn_text = `重新发送(${(time- timeStart)/1000}s)`<br/>    let btn_lock = true<br/>  },()=>{<br/>    let btn_text = `重新发送`,<br/>    let btn_lock = false<br/>  })<br/></span>

Verwandte Empfehlungen:

JS implementiert die Countdown-Funktion für den SMS-Bestätigungscode

SMS-Bestätigungscode entwickeln in Laravel „Spezifikation“ der Sendefunktion (Bild)

JS-Implementierung der Beispielcodefreigabe zum Erhalten von SMS-Bestätigungscode und Countdown-Funktion bei Benutzerregistrierung

Das obige ist der detaillierte Inhalt vonjs-Implementierung der SMS-Bestätigungscode-Countdown-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!