点击按钮只有当时间是零在Jquery html?

Question

我使用下面的链接代码，它工作得很好，但我希望按钮只被点击一次，当时间为零?

启用按钮后一定的时间框架在Jquery html?

我改变了代码如下，但它没有工作?

function enableButton() {
var timer2 = "00:05";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
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;
//minutes = (minutes < 10) ?  minutes : minutes;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
if (minutes == 0 && seconds == 0) {
clearInterval(interval);
document.getElementById('Send_Active').addEventListener('click', function() {
enableButton();
alert('ok');
});
} else {
//document.getElementById('Send_Active').setAttribute('hidden', true);                
}
}, 1000);
}
enableButton();

<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">send again</a>
</div>

Answer 1

您可以使用removeEventListener()删除您添加的侦听器。

const btnSendActive = document.getElementById('Send_Active');
function buttonClicked() {
btnSendActive.removeEventListener('click', buttonClicked);
enableButton();
alert('ok');
}
function enableButton() {
var timer2 = "00:03";
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;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
if (minutes == 0 && seconds == 0) {
clearInterval(interval);
btnSendActive.addEventListener('click', buttonClicked);
}
}, 1000);
}
enableButton();

<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">send again</a>
</div>