网站首页 > 厂商资讯 > 环信 >

如何避免js短信验证码60s倒计时重复触发？

在互联网应用中，短信验证码是一种常见的身份验证方式，用于确保用户身份的真实性。然而，在JavaScript（JS）中实现短信验证码功能时，我们经常会遇到一个问题：如何避免60秒倒计时重复触发？本文将深入探讨这个问题，并提供解决方案。

一、问题分析

60秒倒计时重复触发的原因

在实现短信验证码功能时，我们通常会使用一个60秒的倒计时来限制用户在短时间内重复发送验证码。然而，在实际应用中，可能会出现以下情况导致倒计时重复触发：

（1）用户在倒计时未结束前再次点击发送验证码按钮。

（2）用户在倒计时期间刷新页面或使用浏览器的后退、前进功能。

（3）后端服务器处理请求时出现异常，导致验证码发送失败，用户再次发送。

重复触发倒计时的后果

（1）用户在短时间内收到大量验证码，影响用户体验。

（2）可能导致验证码系统被恶意攻击，例如暴力破解。

二、解决方案

使用前端JavaScript实现倒计时

在JavaScript中，我们可以使用setTimeout函数实现60秒倒计时。以下是一个简单的示例代码：

function startCountdown(duration, display) {

  var timer = duration, minutes, seconds;

  var countdownInterval = setInterval(function () {

    minutes = parseInt(timer / 60, 10);

    seconds = parseInt(timer % 60, 10);



    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;



    display.textContent = minutes + ":" + seconds;



    if (--timer < 0) {

      clearInterval(countdownInterval);

      display.textContent = "重新发送";

    }

  }, 1000);

}



function sendSMS() {

  // 发送验证码的代码

  // ...



  // 开始倒计时

  startCountdown(60, document.querySelector('.countdown'));

}

阻止重复触发倒计时

为了防止用户在倒计时未结束前再次点击发送验证码按钮，我们可以禁用发送按钮，并在倒计时结束后重新启用。以下是一个简单的示例代码：

function sendSMS() {

  // 禁用发送按钮

  var sendButton = document.querySelector('.send-button');

  sendButton.disabled = true;



  // 发送验证码的代码

  // ...



  // 开始倒计时

  startCountdown(60, document.querySelector('.countdown'));

}



// 倒计时结束后重新启用发送按钮

function resetSendButton() {

  var sendButton = document.querySelector('.send-button');

  sendButton.disabled = false;

}

处理页面刷新和后退、前进功能

为了防止用户在倒计时期间刷新页面或使用浏览器的后退、前进功能，我们可以使用localStorage或sessionStorage来存储倒计时状态。以下是一个简单的示例代码：

function startCountdown(duration, display) {

  var timer = duration, minutes, seconds;

  var countdownInterval = setInterval(function () {

    minutes = parseInt(timer / 60, 10);

    seconds = parseInt(timer % 60, 10);



    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;



    display.textContent = minutes + ":" + seconds;



    if (--timer < 0) {

      clearInterval(countdownInterval);

      display.textContent = "重新发送";

      resetSendButton();

    }

  }, 1000);

}



// 页面加载时检查倒计时状态

function checkCountdown() {

  var countdownDuration = localStorage.getItem('countdownDuration');

  if (countdownDuration) {

    startCountdown(countdownDuration, document.querySelector('.countdown'));

  }

}



// 页面加载完成后调用checkCountdown函数

window.onload = checkCountdown;

处理后端服务器异常

在后端服务器处理请求时，我们需要确保在发送验证码失败时返回相应的错误信息。前端接收到错误信息后，可以提示用户并重新发送验证码。以下是一个简单的示例代码：

function sendSMS() {

  // 禁用发送按钮

  var sendButton = document.querySelector('.send-button');

  sendButton.disabled = true;



  // 发送验证码的代码

  // ...



  // 检查发送结果

  if (sendResult) {

    // 开始倒计时

    startCountdown(60, document.querySelector('.countdown'));

  } else {

    // 提示用户发送失败

    alert('发送验证码失败，请稍后再试！');

    resetSendButton();

  }

}

三、总结

在JavaScript中实现短信验证码功能时，为了避免60秒倒计时重复触发，我们可以通过以下方法：

使用前端JavaScript实现倒计时。
阻止用户在倒计时未结束前重复触发倒计时。
处理页面刷新和后退、前进功能。
处理后端服务器异常。

通过以上方法，我们可以确保短信验证码功能的稳定性和安全性，提升用户体验。