Сергей Соколов

Просто стилями можно:

.container div:nth-child(n + 4){
  border:1px solid green;
  background-color:lightgreen;
}

Не пользовался раньше этой функцией.
Техника, вроде бы понятна: переданная функция запустится как только появится не занятый ничем фрейм. Т.е. после отрисовки экрана, как минимум.
Вторым параметром можно передать {timeout} время, сколько максимум готовы прождать первого «ленивца».
Наверное, я бы ускорял так загрузку какого-то большого-тяжёлого веб-приложения, где первый экран можно показать довольно быстро, и пока юзер его рассматривает, подгрузить тяжёлую артиллерию.

Разбираясь с проблемой стоит исследовать, с чем идёт работа: что находится в myDiv.length — можно вывести в консоль, как вариант. console.log(myDiv.length); // undefined

Что представляет из себя myDiv.children — стоит почитать документацию. Важный момент: это «живая» коллекция. Как только удаляете из неё элемент, коллекция обновляется. Удалили 1-й, все сдвинулись на 1, и 3-м станет тот, что ранее был 4-м.

Для задачи можно использовать querySelectorAll — это статичная коллекция.

При первом вызове всё в порядке, на вход пустой массив.
Но надо же вернуть что-то для следующей итерации.
Сейчас при втором вызове на входе arr === undefined

Дело происходит в Chrome? Там баг, не позволяющий работать с localhost.

Попробуйте прописать в hosts любой домен, указывающий на адрес 127.0.0.1, и работать с ним.

И, разумеется, надо добавить в ответы сервера заголовок Access-Control-Allow-Origin: *

let timer = setTimeout(myFeed, 5000); // теперь таймер в переменной

const resetTimer = () => {
  clearTimeout(timer);
  timer = setTimeout(myFeed, 5e3);
}

[...document.querySelectorAll('button.button')]
  .forEach((btn) => btn.addEventListener('click', resetTimer));

С разметкой из комментария к вопросу можно взять все ссылки внутри общего родителя:

const sample = 'submenu-';
const links = [...document.querySelectorAll('ul.navbar-main a')]
  .filter((a) => a.id.startsWith(sample));
console.log(links); // массив со ссылками

links.forEach((a) => a.addEventListener('click', (e) => e.target.classList.add('top'));

upd. как хорошо подсказал в комменте Fedor Vlasenko, можно элегантнее воспользоваться селектором, выбирающим элементы, чей атрибут начинается с указанной строки. a[id^=submenu] выберет те элементы anchor, у которых id начинается с "submenu":

[...document.querySelectorAll('ul.navbar-main a[id^=submenu]')]
  .forEach((a) => a.addEventListener('click', (e) => e.target.classList.add('top'));

{
  let isYMLoaded = false;

  const loadYM = () => {
    if (isYMLoaded) return;
    isYMLoaded = true;
    setTimeout(() => {
      // Metrika code
      // ... 
    }, 0);
  }

  const eventNames = 'click,scroll,touchstart,mouseenter'.split(',');

  const handlerYM = () => {
    eventNames.forEach((name) => document.removeEventListener(name, handlerYM));
    loadYM();
  }

  if (!!~navigator.userAgent.indexOf('YandexMetrika')) {
    // Yandex
    loadYM();
  } else {
    // нормальный посетитель
    eventNames.forEach((name) => document.addEventListener(name, handlerYM));
  }
}

В Adobe Illustrator нарисовать поверх корпусов контуры и таблички и инфой, сохранить копию как.. SVG. Взять код и вставить в HTML. Отображать поверх растровой картинки.

Дать id фигурам контуров и табличек. Не перепутать, как это сделал я: таблички вылезают не для тех контуров.

JS может обращаться по этим id к элементам SVG как к обычным HTML-элементам, и слушать на них события. По наезду мышки подсвечивать контур, показывать табличку ярче:

на скрине с ошибками видна причина: идёт обращение к http://xxxxx/modules/promua/ajax.php по незащищённому HTTP, хотя страница загружена по HTTPS.

Вариант 1: попробуйте открывать ваш исходный сайт не по httpS, а по старому дырявому http.
Вариант 2: разбираться, откуда там идёт этот ajax запрос и почему по несекьюрному протоколу.

кто первый встал — того и тапки

Выполняется условие "больше 1000", и дальше не идет, т.к. там else (иначе)