如何在Jquery中实现倒计时归零时仅允许按钮点击一次

问题原因 #

1. 初始状态未禁用按钮，倒计时过程中按钮可点击，仅因未绑定事件无响应，不符合交互预期
2. 每次倒计时结束都会新增一次点击事件监听，多次倒计时后点击按钮会触发多次回调
3. 未限制点击次数，倒计时结束后按钮可无限次点击

修复后代码 #

JS 代码

// 提前获取按钮元素，避免重复查询DOM
const sendBtn = document.getElementById('Send_Active');

function disableBtn() {
  // 禁用按钮：添加置灰样式，拦截点击行为
  sendBtn.style.pointerEvents = 'none';
  sendBtn.style.color = '#cccccc';
}

function enableBtn() {
  // 启用按钮：恢复正常样式，允许点击
  sendBtn.style.pointerEvents = 'auto';
  sendBtn.style.color = '#007bff';
}

function startCountdown() {
  // 启动倒计时前先禁用按钮
  disableBtn();
  var timer2 = "00:05";
  var interval = setInterval(function() {
    var timer = timer2.split(':');
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = seconds < 0 ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = seconds < 0 ? 59 : seconds;
    // 补前导0，优化显示效果
    seconds = seconds < 10 ? '0' + seconds : seconds;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
    if (minutes == 0 && seconds == 0) {
      clearInterval(interval);
      enableBtn();
      // 绑定单次点击事件，触发后自动移除监听，保证仅能点击一次
      sendBtn.addEventListener('click', handleBtnClick, { once: true });
    }
  }, 1000);
}

function handleBtnClick() {
  alert('ok');
  // 点击后重新启动倒计时
  startCountdown();
}

// 页面加载完成后启动首次倒计时
$(function() {
  startCountdown();
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div id="countdown" class="countdown"></div>
</div>
<div class="form-group">
  <a id="Send_Active" href="javascript:;">send again</a>
</div>

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