[Aetae]

uzlprog, второй вариант прост:

<input type="button" id="button" value="add a"/>
<div>Выходной массив: <span  id="out">[]</span></div>
<script>
var a;
var arr = [1, 2, 3, 4, 5];
var outArr = [];
function f(i = 0) {
  if (i == arr.length) i = 0;
  a = arr[i++];
  setTimeout(() => {
    f(i);
  }, 1000);
}
f();

function add() {
  outArr.push(a);
  out.innerHTML = JSON.stringify(outArr);
}

button.onclick = add;
</script>

Первый вариант не будет иметь никакой точности. Потому что время срабатывания таймеров не может быть точным. Ты думаешь что при интервале в 1 секунду обновления а, если спрашивать каждую 9ую секунду получишь 9ое значение а? А вот и нет. Там может быть 8ое или 10ое, а может и 35ое, если ты вкладками щёлкал или запускал что-то с нагрузкой процессора.
Таймер не гарантируют точное время, при установке таймера в N он сработает после N. Когда после - зависит от окружения.

<input type="button" id="button" value="stop"/>
<div>Выходной массив: <span  id="out">[]</span></div>
<script>
var a;
var arr = [1, 2, 3, 4, 5];
var outArr = [];
function f(i = 0) {
  if (i == arr.length) i = 0;
  a = arr[i++];
  setTimeout(() => {
    f(i);
  }, 1000);
}
f();

function add() {
  outArr.push(a);
  out.innerHTML = JSON.stringify(outArr);
}

function fill(t = 9) {
  add();
  fill.timerId = setTimeout(() => {
    fill(t);
  }, t * 1000);
}
fill();

button.onclick = () => clearTimeout(fill.timerId);
</script>