Счетчик jQuery с модальным окном

Question

Я использую счетчик jQuery с модальным окном после некоторой задержки в цикле.Он работает нормально, но проблема в том, что при перезагрузке страницы счетчик начинает правильно с 10 до 0, например, 10, 9, 8 ... 0, и это то, что мне нужно.

Когда страница не перезагружается, модальное окно загружается, но счетчик начинается с 0, 9, 8, 7 ... 0. Я хочу, чтобы он запускался каждый раз с 10, когда загружается модальное окно.

$(window).load(function() {
  function function_name() {
    setTimeout(function() {
      $('#myCounter').modal('show');
      var timeleft = 10;
      var downloadTimer = setInterval(function() {
        timeleft--;
        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0)
          clearInterval(downloadTimer);
      }, 1000);
      function_name(); // call function
    }, 10000);
  }
  function_name();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="myCounter" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <section id="content" class="middel-align form">
          <div class="container">
            <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
              <h3> The download will begin in <span id="countdowntimer">10 </span> Seconds</h3>
            </div>
            <div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-12">
              <div class="field text-center">
                <a id="BtnOne" class="button" type="button" class="close" data-dismiss="modal" aria-label="Close">Continue Browser</a>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

Надеюсь, вы, ребята, поняли мой вопрос.

Заранее спасибо.

Answer 1

Попробуйте это:

var timeleft = 10;
var downloadTimer;

$('#myCounter').on('shown.bs.modal', function () {
    document.getElementById("countdowntimer").textContent = timeleft;
    $('#myCounter').trigger('focus');

    downloadTimer = setInterval(function() {
        timeleft--;
        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0)    
        clearInterval(downloadTimer);
  }, 1000);

}).on('hide.bs.modal', function(){

    clearInterval(downloadTimer);
    timeleft = 10;

})

Answer 2

вы должны поместить timeleft--;после .следующая строка

document.getElementById("countdowntimer").textContent = timeleft;
timeleft--;

Answer 3

наконец-то вот ваш решенный код

$(window).on('load',function() {
    function function_name() {
      setTimeout(function() {
        $('#myCounter').modal('show');
        var timeleft = 10;
        var downloadTimer = setInterval(function() {
        timeleft--;

        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0){
           timeleft = 11;
        }
     }, 1000);
  }, 10000);
}
function_name();
});

рабочая скрипка https://jsfiddle.net/DTcHh/95494/

Answer 4

Когда вы загружаете страницу, диапазон, в котором вы обновляете значение, начинается с 10, потому что вы определили, что это так.Это происходит только один раз, когда страница загружена.После этого начальное значение будет равно нулю (из последнего таймера загрузки).

Чтобы исправить это, сбросьте начальное значение в интервале до 10, прежде чем выполнять загрузку TimeTimer.

Добавьтеследующая строка (не удаляйте ее из функции downloadtimer)

    document.getElementById("countdowntimer").textContent = timeLeft;

Здесь

var timeleft = 10;
document.getElementById("countdowntimer").textContent = timeLeft;
var downloadTimer = setInterval(function() { 
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if (timeleft <= 0) ...