Как остановить таймер JavaScript? - PullRequest
Новая
       22

Как остановить таймер JavaScript?

0 голосов
/ 02 марта 2019

У меня есть простая страница начальной загрузки, которая включает 45-секундный таймер обратного отсчета и кнопку, которую я собираюсь включить в более крупный проект позже.Таймер обратного отсчета начнется при нажатии кнопки.Что я хотел сделать, так это то, что когда я снова нажму на кнопку в течение 45 секунд, счетчик обнулится.Я не могу этого сделать.Я попытался использовать функцию clearInterval в самом начале функции errorTimer.Но это не сработало.Буду признателен за любую помощь в этом вопросе.вот мои коды: 

// Timer for error message - 45 seconds.	
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

function errorTimer() {
  var fortyFiveSeconds = 60 * .75,
    display = document.querySelector('#time');
  startTimer(fortyFiveSeconds, display);
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>


<div class="container-fluid">

  <div class="row">
    <div class="col-md-12 mt-5">&nbsp;</div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 text-center">
      <p id="time"></p>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

<button type="button" class="btn btn-info" onclick="errorTimer()">Submit  Button</button>

Ответы [ 3 ]

0 голосов
/ 02 марта 2019

Вы можете остановить таймер, очистив интервал: 

// Timer for error message - 45 seconds.    
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var interval = setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
    return function(){ clearInterval(interval); };
}

function errorTimer () {
    var fortyFiveSeconds = 60 * .75,
    var display = document.querySelector('#time');
    var stopper = startTimer(fortyFiveSeconds, display);
    setTimeout(stopper, 20 * 1000); // stop timer 20 seconds later.
};

Я использую простую функцию, возвращаемую функцией startTimer, которую можно использовать для очистки интервала в более поздней точке.

0 голосов
/ 02 марта 2019

Используйте clearInterval вот так 

...
    // Timer for error message - 45 seconds.    
    var timerId;
    function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    if(timerId != undefined) {
        clearInterval(timerId)
    }
    timerId = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
    }

    function errorTimer () {
        var fortyFiveSeconds = 60 * .75,
        display = document.querySelector('#time');
    startTimer(fortyFiveSeconds, display);
    };
    ...
0 голосов
/ 02 марта 2019

Как уже упоминалось @Shidersz, вам нужно сохранить идентификатор, связанный с интервалом, и использовать этот идентификатор для очистки интервала перед сбросом часов. 

// Timer for error message - 45 seconds.	
var id = null;

function startTimer(duration, display) {
  if (id !== null) {
    clearInterval(id);
    id = null;
  }

  var timer = duration,
    minutes, seconds;
  id = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

function errorTimer() {
  var fortyFiveSeconds = 60 * .75,
    display = document.querySelector('#time');
  startTimer(fortyFiveSeconds, display);
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>


<div class="container-fluid">

  <div class="row">
    <div class="col-md-12 mt-5">&nbsp;</div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 text-center">
      <p id="time"></p>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

<button type="button" class="btn btn-info" onclick="errorTimer()">Submit  Button</button>
...