javascript - 尝试用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 进行 Promise，否则它们将同时运行(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 循环 block 不应以分号结尾，函数声明也不应以分号结尾。