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

Question

我有一个 jQuery 函数，它在单击 redeem 按钮时执行。当有人点击第一个 redeem 按钮时，计时器工作正常，但对于以下兑换按钮，我需要刷新页面。在有人点击两个或更多兑换按钮之前，有什么方法可以重置 timer 吗？因此，在计时器重置为 00:00

之后，另一个按钮的计时器将从 15:00 重新开始

请检查 jQuery timer seconds 有什么问题，为什么第二次显示模式弹出窗口时运行这么快？

Codepen source code

$(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>

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

jQuery: how do i reset the countdown timer?

html

jquery

timer

countdown