Incorrect setInterval

Question

Hello! Trying to create a game (clicker). Clicking on the settings, the function is launched, in which several more functions are nested. One of them is setgsOfSpeed. The function starts at a specified interval (the interval is a global variable changeSpeed). In this function, at each interval, the variable con is added 1. And then, the position of the block changes depending on the remainder of dividing con by 2 (that is, the block is moved n pixels to the left and then to the right). At this stage, everything works. It is necessary that when you click on - in the Speed line, 300 is subtracted from the changeSpeed variable so that the function call interval is more frequent. For some reason, this does not work, but this is not the whole problem. If you forget about my question mentioned below and just go to the settings, and then click on the Back button, then the clearInterval action is added to this event, which should terminate the setgsOfSpeed function. But this does not happen for reasons I do not understand. When you click on start, the position function is launched, which starts at an interval equal to changeSpeed. But something incomprehensible happens: first, the menu is not removed, although I indicated that when I clicked on start, all elements take the value "none" in the display; secondly, my circle block changes the location too quickly, although changeSpeed = 840 (if we take into account that we did not change the Speed value in the settings), that is, it seems that the block changes its position under the influence of two intervals, although I added the clearInterval event for the first interval. What could be the problem? I hope that explained more or less clear. Thanks in advance!

window.onload = function () { var start = document.getElementById("start"), // Меню setgs = document.getElementById("setgs"), back = document.getElementById("back"), exit = document.getElementById("exit"); var divSizePlus = document.getElementById("divSizePlus"), // Настройки divSizeMinus = document.getElementById("divSizeMinus"), divSpeedPlus = document.getElementById("divSpeedPlus"), divSpeedMinus = document.getElementById("divSpeedMinus"); var sizePlus = document.getElementById("sizePlus"), // Кнопки в настройках sizeMinus = document.getElementById("sizeMinus"), speedPlus = document.getElementById("speedPlus"), speedMinus = document.getElementById("speedMinus"); var timer; // Таймер для интервала в настройках var timer1; // Таймер для интервала при нажатии на старт var circle = document.getElementById("circle"); // Сам блок (в виде шара) var score = document.getElementById("score"), // Очки points = document.getElementById("points"); var size = document.getElementById("size"); // Для показа размера шара var con = 0; // Используется в функции в настройках для изменения положения шара var changeSpeed = 840; // Значение, указывающие с каким интервалом вызывать функцию. setgs.onclick = function () { // Запуск функции при нажатии на Settings back.style.margin = "90px 0 0 500px"; divSizePlus.style.display = "block"; divSizeMinus.style.display = "block"; divSpeedPlus.style.display = "block"; divSpeedMinus.style.display = "block"; back.style.display = "block"; circle.style.display = "block"; size.style.display = "block"; start.style.display = "none"; setgs.style.display = "none"; var plusSize = 80, minusSize = 80, defSize = 80, sumPlus = 0, sumMinus = 0, radius = 50, counter = 5; sizePlus.onclick = function () { // Увеличить размер if (defSize > 120) { plusSize.style.cursor = "none"; } plusSize = defSize; sumPlus = plusSize + counter; circle.style.borderRadius = radius + "px"; circle.style.width = sumPlus + "px"; circle.style.height = sumPlus + "px"; plusSize = sumPlus; defSize = plusSize; radius = radius + counter; size.innerHTML = "(" + defSize + ")"; }; sizeMinus.onclick = function () { // Уменьшить размер if (defSize < 20) { minusSize.style.cursor = "none"; } minusSize = defSize; sumMinus = minusSize - counter; circle.style.width = sumMinus + "px"; circle.style.height = sumMinus + "px"; minusSize = sumMinus; defSize = minusSize; size.innerHTML = "(" + defSize + ")"; }; speedMinus.onclick = function () { // Увеличить скорость ш changeSpeed = changeSpeed - 300; }; function setgsOfSpeed () { // Функция для изменения положения шара в настройках con++; if ( (con%2) === 1 ) { circle.style.left = -330 + "px"; } else if ( (con%2) === 0 ) { circle.style.left = -160 + "px"; } } var timer1 = setInterval(setgsOfSpeed, changeSpeed); // Первый интервал } back.onclick = function () { // Кнопка back clearInterval(timer1); // Очистка первого интервала divSizePlus.style.display = "none"; divSizeMinus.style.display = "none"; divSpeedPlus.style.display = "none"; divSpeedMinus.style.display = "none"; circle.style.display = "none"; back.style.display = "none"; size.style.display = "none"; start.style.display = "block"; setgs.style.display = "block"; } exit.onclick = function () { // Кнопка выхода из игры clearInterval(timer); // Очиска второго таймера (это значит, что игра завершена и запускать функцию больше не нужно) circle.style.left = -150 + "px"; circle.style.top = 43 + "px"; circle.style.backgroundColor = "aqua"; circle.style.display = "none"; exit.style.display = "none"; points.style.display = "none"; score.style.display = "none"; start.style.display = "block"; setgs.style.display = "block"; } start.onclick = function () { // Кнопка start для начала игры start.style.display = "none"; setgs.style.display = "none"; circle.style.display = "block"; exit.style.display = "block"; score.style.display = "block"; points.style.display = "block"; var count = 0; circle.onclick = function () { circle.style.backgroundColor = "hsl(" + getRandom(0,360)+",75%,50%)"; count++; score.innerHTML = count; } function position () { // Функция для изменения положения шара во время игры var x = window.innerWidth, y = window.innerHeight; x = x - 390; y = y - 100; circle.style.left = getRandom(1, x - 200) + "px"; circle.style.top = getRandom(1, y - 200) + "px"; } timer = setInterval(position, 840); // Второй интервал function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } } }

 div { position: absolute; margin: 230px 0 0 600px; cursor: pointer; } /* Текст в меню */ span { position: absolute; left: 35px; top: 4px; cursor: default; } body { background-image: url(images/fon.jpg); font-family: Arial Black; color: bisque; font-size: 25px; } #circle { left: -160px; top: 53px; width: 80px; height: 80px; background-color: aqua; border-radius: 50px; display: none; cursor: default; } /* меню */ #start { top: 10px; } #setgs { top: 30px; padding-top: 25px; } #back { top: 280px; left: 108px; display: none; } #exit { display: none; top: -218px; left: 696px; } #points { left: 8px; top: 10px; display: none; } #score { margin-top: 35px; display: none; } /* блоки с кнопками настроек */ #divSizePlus { top: 50px; left: 70px; display: none; } #divSizeMinus { top: 50px; display: none; } #divSpeedPlus { left: 70px; top: 90px; display: none; } #divSpeedMinus { top: 90px; display: none; } /* кнопки + - */ input { background-color: burlywood; border: 1px solid burlywood; width: 26px; height: 25px; cursor: pointer; } #size { position: absolute; top: 275px; left: 800px; font-size: 16px; display: none; }

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Clicker</title> <link href="Test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="start">Start</div> <div id="setgs">Settings</div> <div id="back">Back</div> <div id="divSizePlus"><input type="button" value="+" id="sizePlus"><span>Size</span></div> <div id="divSizeMinus"><input type="button" value="-" id="sizeMinus"></div> <div id="divSpeedPlus"><input type="button" value="+" id="speedPlus"><span>Speed</span></div> <div id="divSpeedMinus"><input type="button" value="-" id="speedMinus"></div> <div id="circle"></div> <div id="exit">Exit</div> <span id="points">Очки: </span> <p id="score"></p> <p id="size"></p> <script src="Test.js"></script> </body> </html>

"It is necessary that when you click on - in the line Speed" - it may be unclear what the -.
To do this, you must run the code, there will be a button in the settings -.

Accepted Answer · 2017-08-19T13:02:16

Remove var from line

 var timer1 = setInterval(setgsOfSpeed, ...

to use the variable timer1 , declared above.

The frequency of the running interval can not be changed. The timer must be cleared and restarted with the new value:

 speedMinus.onclick = function () { // Увеличить скорость ш changeSpeed = changeSpeed - 300; clearInterval(timer1); timer1 = setInterval(setgsOfSpeed, changeSpeed); };

Another option is to use the setTimeout call chain.

What I am inattentive .. Such nonsense ... Thank you very much for your help!
"It is necessary that when you click on - in the Speed line, 300 is subtracted from the changeSpeed variable so that the function call interval is more frequent. For some reason this does not work" - Can you help with this?
Thanks, it helped, now in the settings with the increase / decrease immediately clearly visible, what will be the speed.
When I select the desired speed, I click on back, then on start.
And then either the ball begins to move at the desired speed and everything is in order, or, for some reason, the settings open again, although I clicked start.

Incorrect setInterval

1 answer 1

More articles: