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

Срабатывает только раз потому, что в обработчике заменяется innerHTML. При этом теряются все слушатели событий: новая разметка, всё новое — надо заново вешать обработчики. Либо слушать события выше.

p.s. где-то плачет-рыдает принцип DRY (Don't Repeat Yourself — Не Повторяй Себя). Все куски кода, что повторяются — в переменную / константу.

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

.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));
  }
}