页面加载有计数器时，如何用jQuery实现重发按钮点击2次后禁用

需求回顾 #

页面加载时启动60秒计数器，计数器归零后#btnResend按钮恢复可用；点击该按钮触发OTP重发，第2次点击时显示“已达到最大重发次数”并禁用按钮。原有代码存在第一次点击就触发提示和禁用的问题。

问题分析 #

你尝试的代码存在两个核心问题：

• 无论重发次数是否超过限制，都会执行clearInterval、显示提示的代码，导致第一次点击就出现错误提示
• 变量interval定义在页面加载的if块内部，按钮点击事件无法访问该变量，导致无法正常清除定时器

修复后的完整代码 #

页面加载计数器与重发逻辑整合

// 提升变量作用域，确保点击事件能访问到核心变量
var counter = 60;
var interval;
// 重发次数计数器，初始为0
var resendCount = 0;

if ($k('#Passcode').is(':visible')) {
  $('.input').removeAttr('required');
  
  interval = setInterval(function() {
    counter--;
    
    if (counter <= 0) {
      clearInterval(interval);
      $('#timer').empty();
      $('#btnResend').removeClass('disabled');
      return;
    } 
    else {
      $('#time').text('Resend code in ' + counter);
    }
  }, 1000);

  $("#btnSubmitOTP").click(function() {
    if ($('#codeBox1').val() !== '' &&
      $('#codeBox2').val() !== '' &&
      $('#codeBox3').val() !== '' &&
      $('#codeBox4').val() !== '' &&
      $('#codeBox5').val() !== '' &&
      $('#codeBox6').val() !== '' &&
      $('#codeBox7').val() !== '') {
      mainSubmitClick();
    }
  });
}

// 重发按钮点击逻辑
$("#btnResend").click(function() {
  resendCount++;
  
  // 仅当重发次数超过1次时，触发限制逻辑
  if (resendCount > 1) {
    $('#timer').text('已达到最大重发次数');
    $(this).prop('disabled', true).addClass('disabled');
    clearInterval(interval);
    $('#time').hide();
    return;
  }
  
  // 未超过次数时，执行正常重发逻辑
  $k('#errorcode').val('');
  $k('#servicetype').val("SENDOTP");
  mainSubmitClick();
  
  // 重发后重置倒计时，防止连续点击
  clearInterval(interval);
  counter = 60;
  $('#time').text('Resend code in ' + counter);
  $('#btnResend').addClass('disabled');
  // 重新启动定时器
  interval = setInterval(function() {
    counter--;
    
    if (counter <= 0) {
      clearInterval(interval);
      $('#timer').empty();
      $('#btnResend').removeClass('disabled');
      return;
    } 
    else {
      $('#time').text('Resend code in ' + counter);
    }
  }, 1000);
  
  return false;
});

关键修复点说明 #

1. 变量作用域调整：将counter、interval、resendCount提升到外层作用域，确保按钮点击事件能正常访问这些变量
2. 次数判断逻辑修正：仅当resendCount > 1时，才执行显示提示、禁用按钮的操作；未超过次数时正常执行重发流程
3. 重发后重置计数器：每次成功重发后，重新启动60秒倒计时，避免用户无限制连续点击
4. 语法错误修复：修正了原代码中('#btnSubmitOTP').removeClass('disabled')缺少$的语法问题

内容的提问来源于stack exchange，提问作者Mahi