интервал очистки после достижения счетчиком 0 или сброса - PullRequest
Новая
       12

интервал очистки после достижения счетчиком 0 или сброса

0 голосов
/ 14 января 2019

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

let counter = 60;
let healthPoints = 3;
let points = 0;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    const countTime = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(countTime);
        }
    }, 1000)
}

function resetGame() {
    newBoard();
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(countTime);
}

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Это потому, что вы на самом деле не очистили интервал, вы должны предоставить функции clearInterval, которой требуется идентификатор интервала , чтобы узнать, какой интервал следует очистить. Смотри https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

Этот идентификатор фактически возвращается, когда вы вызываете функцию setInterval, поэтому ваша переменная countTime является вашим идентификатором интервала.

Именно поэтому, когда он достигает нуля, он работает, это потому, что вы правильно очищаете интервал, предоставляя его идентификатор функции clearInterval, и наоборот, вы просто предоставляете ссылку на функцию clearInterval в функции resetGame

Итак, что вы можете сделать, это на самом деле вернуть ваш intervalId из вашего countTime и предоставить его функции resetGame: 

function countTime() {
    ...
    const timer = document.querySelector('.timer');
    // I renamed it just to be clear
    const countTimeIntervalID = setInterval(function () {
    counter--;
    timer.innerHTML = + counter;
    if (counter == 0) {
        alert('Game over')
        clearInterval(countTime);
    }
 }, 1000)
   return countTimeIntervalID
}
let countTimeIntervalID = countTime();
function resetGame() {
     ...
    clearInterval(countTimeIntervalID);
}

Также обратите внимание, что причина, по которой вы нажали кнопку сброса, удвоила время счетчика, потому что, поскольку вы не очистили первый, он все еще работал, поэтому фактически были интервалы, выполняющиеся и обновляющие его. элемент таймера dom

0 голосов
/ 14 января 2019

Аргумент countTime, который вы передаете функции clearInterval внутри функции resetGame, является ссылкой на функцию countTime. Вам необходимо переименовать переменную и объявить ее глобально: 

let counter = 60;
let healthPoints = 3;
let points = 0;
let t = null;
document.querySelector('.reset').addEventListener('click', resetGame);
function countTime() {
    const timer = document.querySelector('.timer');
    t = setInterval(function () {
    counter--;
    timer.innerHTML = + counter; 
    if (counter == 0) {
      alert('Game over')     
      clearInterval(t);
    }
   }, 1000)
 }

function resetGame() {
  newBoard();
  counter = 60;
  healthPoints = 4;
  points = 0;
  clearInterval(t);
}
0 голосов
/ 14 января 2019

setInterval возвращает значение, которое вы передаете clearInterval(), когда хотите остановить таймер. Вы должны сохранить это в области видимости, где resetGame() может видеть это. Вы декларируете внутри countTime(), что означает, что это только в области действия.

Здесь я назвал его interval и определил его вне обеих функций, чтобы обе функции имели к нему доступ: 

let counter = 60;
let healthPoints = 3;
let points = 0;
let interval;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    interval = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(interval);
        }
    }, 1000)
}

function resetGame() {
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(interval);
    countTime()
}

countTime()
<button class="reset">Reset</button>
<div class = "timer"></div>
...