Как остановить тайм-аут, когда счет превышает 1000

Я хочу знать, как очистить интервал и счет, потому что это работает, но когда оно достигает более 1000 и я нажимаю «Сброс», оно не сбрасывается полностью.

Я пытался поставить функцииclearTimeout впереди всего остального и сделать все это одной функцией, но не смог в этом разобраться. Если есть более простой способ соединить их, это было бы хорошо, или любой другой способ сделать это.

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const btnElement3 = document.getElementById("btn3");
const btnElement4 = document.getElementById("btn4");
const btnElement5 = document.getElementById("btn5");
const spnElement = document.getElementById("span");
let score = 1;

let intervalTimer;
let intervalTimer1;
let intervalTimer2;
let intervalTimer3

btnElement2.addEventListener("click", () => {
  if (score < 10) {
    console.info("poor");
  } else if (score >= 10) {
    score -= 10;
    spnElement.innerText = score;
    intervalTimer = setInterval(increment, 1000);

    function increment() {
      score = score % 1000000 + 1;
      spnElement.innerText = score;
    }
  }
})

btnElement3.addEventListener("click", () => {
  if (score < 30) {
    console.info("poor");
  } else if (score >= 30) {
    score -= 30;
    spnElement.innerText = score;
    intervalTimer1 = setInterval(increment1, 1000);

    function increment1() {
      score = score % 1000000 + 5;
      spnElement.innerText = score;
    }
  }
})

btnElement4.addEventListener("click", () => {
  if (score < 80) {
    console.info("poor");
  } else if (score >= 80) {
    score -= 80;
    spnElement.innerText = score;
    intervalTimer2 = setInterval(increment2, 1000);

    function increment2() {
      score = score % 1000000 + 10;
      spnElement.innerText = score;
    }
  }
})

btnElement5.addEventListener("click", () => {
  if (score < 200) {
    console.info("poor");
  } else if (score >= 200) {
    score -= 200;
    spnElement.innerText = score;
    intervalTimer3 = setInterval(increment3, 1000);

    function increment2() {
      score = score % 1000000 + 30;
      spnElement.innerText = score;
    }
  }
})

btnElement.addEventListener("click", () => {
  spnElement.innerText = score++;
})

btnElement1.addEventListener("click", () => {
  clearTimeout(intervalTimer);
  clearTimeout(intervalTimer1);
  clearTimeout(intervalTimer2);
  clearTimeout(intervalTimer3);
  spnElement.innerText = 0;
  score = 1;
})

document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score++;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") {
    clearTimeout(intervalTimer);
    clearTimeout(intervalTimer1);
    clearTimeout(intervalTimer2);
    clearTimeout(intervalTimer3);
    spnElement.innerText = 0;
    score = 1;
  }
})
body {
  background-color: moccasin;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: whitesmoke;
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0px;
  border-width: 2px;
  border-bottom-width: 2px;
  border-bottom-color: #333;
  border-bottom-style: solid;
  width: 100.09%;
}

#btns {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin: 135px;
}

.btns {
  background-color: dimgray;
  color: whitesmoke;
  border: 0;
  border-radius: 5px;
}

.btns:hover {
  background-color: mediumpurple;
}

#upgradeButtons {
  margin: 20px;
}

#text {
  text-align: center;
}
<div id = "header">
  <div id = "text">
    <h1>Skibidi Clicker</h1>
    <h2><span id = "span">0</span></h2>
  </div>
</div>

<div id = "btns">
  <button id = "btn" class = "btns">+</button>
  <button id = "btn1" class = "btns">Reset</button><br>
  <div id = "upgradeButtons">
    <button id = "btn2" class = "btns">Skibidi (10 clicks)</button><br>
    <button id = "btn3" class = "btns">Cameraman (30 clicks)</button><br>
    <button id = "btn4" class = "btns">Speakerman (80 clicks)</button><br>
    <button id = "btn5" class = "btns">Astro Toilet (200 clicks)</button>
  </div>
</div>

не сбрасывается полностью" - Можно поконкретнее? Когда вы отлаживаете, какая конкретная операция делает не то, что вы ожидаете?

David 17.05.2024 19:46

не имеет ничего общего с поведением сброса, но increment3 не определен, поэтому выдает ошибку

Chris G 17.05.2024 19:47

@Дэвид, когда он продолжает считать, но должен остановиться, и это как-то связано с тем, что он превышает 1000

user22881646 17.05.2024 21:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
58
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Способ очистки setInterval — с помощью clearInterval (а не clearTimeout, как вы используете здесь) — см. документацию: https://developer.mozilla.org/en-US/docs/Web/API/setInterval

Для любой кнопки вы сохраняете одно значение для интервала:

let intervalTimer;

Когда вы нажимаете кнопку, вы пишете это значение:

intervalTimer = setInterval(increment, 1000);

Что произойдет, если вы нажмете эту кнопку второй раз? Или третий? И так далее? Вы перезаписываете предыдущее значение.

При перезагрузке игры вы очищаете интервал:

clearTimeout(intervalTimer);

(Кстати, вместо этого следует использовать clearInterval(). Технически они взаимозаменяемы, но для ясности их следует хранить отдельно.)

При этом будет удален только самый последний сохраненный вами интервал. Все предыдущие все еще работают, потому что вы их никогда не очищали и не можете очистить, потому что у вас больше нет значений их идентификаторов.

Если вам нужно сохранить несколько значений, используйте массив:

let intervalTimers = [];

Поместите каждое новое значение в массив:

intervalTimers.push(setInterval(increment, 1000));

И очистите все интервалы, хранящиеся в массиве:

intervalTimers.forEach(clearInterval);
Ответ принят как подходящий

Основная ошибка в коде заключается в том, что в случае нажатия кнопки не проверяется, запущен ли уже таймер или нет, что генерирует создание нового таймера, а ссылка (идентификатор таймера) на предыдущий таймер перезаписано. Поэтому при «остановке» все сохраненные таймеры сбрасываются (не более 4), а остальные продолжают работать.

Отсутствие проверки работоспособности таймера будет считаться идеей, а не ошибкой.

Ниже приведен код (без дублирующего кода), как вы можете реализовать свою задачу с запуском множества таймеров и остановкой всех в один клик.

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const spnElement = document.getElementById("span");
let score = 0;

const buttonContainer = document.getElementById('upgradeButtons');
// array of buttons for create
const buttons = [
    { name: 'Skibidi', scoreNeed: 10, scoreInc: 1},
    { name: 'Cameraman', scoreNeed: 30, scoreInc: 5},
    { name: 'Speakerman', scoreNeed: 80, scoreInc: 10},
    { name: 'Astro Toilet', scoreNeed: 200, scoreInc: 30},
];
// all created intervals
const intervals = [];
// do create action buttons from array
buttons.forEach(button => {
  const addButton = document.createElement('button'); // create btn
  addButton.classList.add('btns'); // add class
  addButton.innerText = `${button.name} (${button.scoreNeed} clicks)`; // add text
  addButton.addEventListener('click', () => { // add listener
    if (score < button.scoreNeed) {
      console.info('poor');
    } else {
      score -= button.scoreNeed;
      spnElement.innerText = score;
      let timerId = setInterval(() => {
        score = score % 1000000 + button.scoreInc;
        spnElement.innerText = score;
      }, 1000);
      intervals.push(timerId);
    }
  })
  buttonContainer.appendChild(addButton); // append in DOM
})

function inc() {
  spnElement.innerText = score++;
}

function clear() {
  intervals.forEach(clearInterval); // stop all intervals
  intervals.length = 0; // clear array
  spnElement.innerText = 0;
  score = 1;
}

btnElement.addEventListener("click", inc);
btnElement1.addEventListener("click", clear);
document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") inc();
});

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") clear();
});
body {
  background-color: moccasin;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: whitesmoke;
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0px;
  border-width: 2px;
  border-bottom-width: 2px;
  border-bottom-color: #333;
  border-bottom-style: solid;
  width: 100.09%;
}

#btns {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin: 135px;
}

.btns {
  background-color: dimgray;
  color: whitesmoke;
  border: 0;
  border-radius: 5px;
}

.btns:hover {
  background-color: mediumpurple;
}

#upgradeButtons {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#upgradeButtons>.btns {
  background-color: dimgray;
  color: whitesmoke;
  border: 0;
  border-radius: 5px;
  margin: 3px;
  width: 175px;
  justify-content: center;
}

#text {
  text-align: center;
}
<div id = "header">
  <div id = "text">
    <h1>Skibidi Clicker</h1>
    <h2><span id = "span">0</span></h2>
  </div>
</div>

<div id = "btns">
  <button id = "btn" class = "btns">+</button>
  <button id = "btn1" class = "btns">Reset</button><br>
  <div id = "upgradeButtons">
  </div>
</div>

Другие вопросы по теме