How to properly build the mini-application architecture?

Question

JavaScript

How to properly build the application architecture so that everything works quickly and without memory leaks?
My application:

// Скрипт добавляющий кнопки (id="agreat")

// Stage 1
$("#a-great").on('click', function () {
                setInterval(timer(), 1000);
            });

// stage 2
function timer() {
  if ($(".timeout").length === 0) {
                history();
            }
}

// Stage 3 | Функция History, смотрит на предыдущие действия, и исходя из этого делает выводы.

function history() {
  // Code
}

// Stage 4

reInspection: function (data) {
            /*
            * Повторная проверка
            */
            if (все ок) {
                // Передаем данные
                handler(data);
            }
            else {
                // Повторяем проверку
                history();
            }
        }

// Stage 5

function handler(data) {
  // Это функция все обрабатывает, делает выводы
  go(data);
}

// Stage 6 | Функция go, получает данные и делает ход. 
function go(data) {
  // код
}

Here is the 2nd function, it should repeat every second.

Give advice on how to build an architecture so that there are no hemorrhoids in the future when upgrading.
You can write an example on jsfiddle .

// It's a robot playing a game :)

Thanks in advance!

Answer 1

document.getElementsByClassName returns a list of elements, not a single element.

let heroBlocks = document.getElementsByClassName('hero');
if (heroBlocks.length > 0) {
   let hero = heroBlocks[0];
   console.log(hero.offsetHeight);
}

well, or you can in the forehead

let hero = document.getElementsByClassName('hero')[0];
console.log(hero.offsetHeight);

or using querySelector

let hero = document.querySelector('.hero');
console.log(hero.offsetHeight);

UPD : I will give advice, learn how to use debugging tools, for example, the Sources tab of the chromium developer tools. There you can set a breakpoint to stop the script, and hover the mouse over the desired variable, and find out what it actually contains.
Well, or in the grandfather's way

let hero = document.getElementsByClassName('hero');
console.warn(hero);  // выведет HTMLCollection [], вы сразу поймете, что это не элемент, а коллекция/список.

Answer 2

If the robot really attacks the player, then this must be written on the server. Then send some rpc to the client, and the robot should attack once per call.
Or it's just a battle visual that makes an animation according to the battle log received from the server.