Я хочу знать, как очистить интервал и счет, потому что это работает, но когда оно достигает более 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>не имеет ничего общего с поведением сброса, но increment3 не определен, поэтому выдает ошибку
@Дэвид, когда он продолжает считать, но должен остановиться, и это как-то связано с тем, что он превышает 1000



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Способ очистки 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>
не сбрасывается полностью" - Можно поконкретнее? Когда вы отлаживаете, какая конкретная операция делает не то, что вы ожидаете?