Попытка зациклить отображение случайных чисел с помощью JavaScript, не может понять, почему отображается только одно число

Question

Я пытаюсь написать код, который в конечном итоге станет основой простой n-back игры.Прямо сейчас я просто пытаюсь получить 30 случайных чисел, которые будут отображаться одно за другим после небольшой задержки (возможно, вы уже видели мои предыдущие вопросы, связанные с этим небольшим проектом - если да, то спасибо всем за ваш вклад, поскольку он был чрезвычайнополезно).Я могу зациклить отображение точно так, как я хочу, используя метод setInterval, но это бесполезно, потому что по какой-то причине он не примет функцию обратного вызова для отслеживания количества интервалов, а затем вызовет метод clearInterval.Другими словами, цифры продолжают отображаться бесконечно, а это не то, что я хочу.Я пытаюсь добиться того же, вместо этого используя функцию, которая использует цикл for, но это также не сработает, потому что по какой-то причине функция работает неправильно и отображает только одно случайное число, а затем останавливается.Смотрите код ниже:

var javascriptElement = "numbers-display";
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//This function takes a single argument and displays it in the browser.
function displayContent (content) {
  document.getElementById(javascriptElement).innerHTML = content;
};

function runRandomNumbers (array) {
  displayContent(array[Math.floor(Math.random()*10)]);
};

function runOnTimeOut(fn, arg) {
  setTimeout(function() {
    fn(arg);
  }, 2000);
};

//this is the function that isn't doing what I want it to do.
function runOnLoop(fn, arg1, arg2) {
  for (i = 0; i < 30; i++) {
    fn(arg1, arg2);
  };
}

runOnLoop(runOnTimeOut, runRandomNumbers, numbers);

<div id="numbers-display"></div>

Кто-нибудь может указать, почему эта функция будет отображать только одно случайное число вместо 30 случайных чисел?Еще раз спасибо за вашу помощь.

Answer 1

Попробуйте await взамен обещаний в каждой итерации, в противном случае все они будут выполняться одновременно (setTimeout в настоящее время все запускаются вместе, после 2000 мс):

var javascriptElement = "numbers-display";
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//This function takes a single argument and displays it in the browser.
function displayContent (content) {
  document.getElementById(javascriptElement).innerHTML = content;
}

function runRandomNumbers (array) {
  displayContent(array[Math.floor(Math.random()*10)]);
}

function runOnTimeOut(fn, arg) {
  return new Promise(resolve => 
    setTimeout(() => {
      fn(arg);
      resolve();
    }, 500)
  );
}

//this is the function that isn't doing what I want it to do.
async function runOnLoop(fn, arg1, arg2) {
  for (let i = 0; i < 30; i++) {
    await fn(arg1, arg2);
  }
}

runOnLoop(runOnTimeOut, runRandomNumbers, numbers);

<div id="numbers-display"></div>

Также обратите внимание, что for циклические блоки не должны заканчиваться точкой с запятой, и ни один не должен функционировать объявления.