jQuery:如何重置倒计时计时器

Question

我有一个jQuery函数，单击redeem按钮即可执行。当有人点击第一个redeem按钮时，计时器工作正常，但对于以下兑换按钮，我需要刷新页面。在有人点击两个或多个兑换按钮之前，有没有办法重置timer？因此，计时器将重置为00:00后，计时器将从15:00再次启动另一个按钮

请检查jQuerytimer seconds有什么问题？为什么第二次模式弹出时秒跑得这么快？

Codepen源代码

$(document).ready(function() {
$(".redeem_btn").on("touchstart, click", function(e) {
$('#myModal').modal('show');
function countdown(elementName, minutes, seconds) {
var element, endTime, hours, mins, msLeft, time;
function twoDigits(n) {
return (n <= 9 ? "0" + n : n);
}
function updateTimer() {
msLeft = endTime - (+new Date);
if (msLeft < 1000) {
element.innerHTML = "countdown's over!";
$('#myModal').modal('hide');
} else {
time = new Date(msLeft);
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' +
twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
}
}
element = document.getElementById(elementName);
endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
updateTimer();
}
countdown("countdown", 15, 0);
/*countdown( "countdown2", 100, 0 );*/
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="">
<div class="col-md-9 col-sm-12 mee" style="float: left;">
<div class="section-products">
<div class="row">
<h2 class="section-title-popup">CONGRATULATIONS</h2>
</div>
<div class="row">
<h6 class="uper-class">you have successfully redeemed your coupon for</h6>
</div>
<div class="row">
<h2 class="lower-class2">
Test123
</h2>
</div>
<div class="row">
<h2 class="lower-class">
test123
</h2>
<hr style="width: 50%;text-align: center;margin: 0 auto 0.5em;float: none;background-color: #2d2b2d;">
</div>
<div class="row">
<h6 class="low-class">Show this to your merchant</h6>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 you" style="float: left;">
<p style="">This voucher will expire in <strong class="countdown" id="countdown"> 15 </strong> minutes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

类似的东西？

我移动了函数并使用setInterval，下次调用时我会清除它

let tId;
function countdown(elementName, minutes, seconds) {
var element, endTime, hours, mins, msLeft, time;
function twoDigits(n) {
return (n <= 9 ? "0" + n : n);
}
function updateTimer() {
msLeft = endTime - (+new Date);
if (msLeft < 1000) {
element.innerHTML = "countdown's over!";
$('#myModal').modal('hide');
} else {
time = new Date(msLeft);
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' +
twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
}
}
element = document.getElementById(elementName);
endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
clearTimeout(tId)
tId = setInterval(updateTimer, 1000);
}

$(document).ready(function() {
$(".redeem_btn").on("touchstart, click", function(e) {
$('#myModal').modal('show');
countdown("countdown", 15, 0);
/*countdown( "countdown2", 100, 0 );*/
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="">
<div class="col-md-9 col-sm-12 mee" style="float: left;">
<div class="section-products">
<div class="row">
<h2 class="section-title-popup">CONGRATULATIONS</h2>
</div>
<div class="row">
<h6 class="uper-class">you have successfully redeemed your coupon for</h6>
</div>
<div class="row">
<h2 class="lower-class2">
Test123
</h2>
</div>
<div class="row">
<h2 class="lower-class">
test123
</h2>
<hr style="width: 50%;text-align: center;margin: 0 auto 0.5em;float: none;background-color: #2d2b2d;">
</div>
<div class="row">
<h6 class="low-class">Show this to your merchant</h6>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 you" style="float: left;">
<p style="">This voucher will expire in <strong class="countdown" id="countdown"> 15 </strong> minutes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>