如何制作类似于谷歌数字生成器的数字生成器答案

【问题标题】：how to make number generator similar to google number generator如何制作类似于谷歌数字生成器的数字生成器
【发布时间】：2020-10-07 10:15:57
【问题描述】：

我正在尝试在网页上创建某种类型的数字生成器。我想在生成的数字显示之前显示五个数字。为了更好地想象，您可以查看google generator。当您单击生成时，它会在生成的数字之前显示 3-4 个数字。我使用 setInterval 或 setTimeout 但我不知道它是如何工作的。我的js代码：

var button = document.querySelector("button");

button.addEventListener("click",function() {
    for (var i = 0; i < 8; i++) {
        setInterval(textC,5);
    }
});

function textC(){
    number.textContent = Math.floor(Math.random() * 1000) + 1;
}

感谢您的每一个帮助！

【问题讨论】：

标签： javascript numbers generator

【解决方案1】：

setInterval() 的问题在于，除非被清除，否则它将永远持续下去，从而导致您不断生成随机数。相反，您可以使用setTimeout()，但将超时设置为根据for 循环中i 的值进行更改。这样，每个间隔将在另一个间隔 50 m/s 之后发生。

请看下面的例子：

const button = document.querySelector("button");
const number = document.querySelector("#number");
button.addEventListener("click", function() {
  for (let i = 0; i < 5; i++) {
    setTimeout(textC, 50 * i);
  }
});

function textC() {
  number.textContent = Math.floor(Math.random() * 1000) + 1;
}

<p id="number"></p>
<button>Generate</button>

【讨论】：

【解决方案2】：

不要使用循环 (why not?)。只需嵌套setTimeout 并调用它，直到达到预定义的阈值。它为您提供最大程度的控制。

var button = document.querySelector("button");
var number = document.querySelector("#number");
const nRuns = 12;
const timeout = 100;
let iterator = 0;

button.addEventListener( "click", textC);

function textC(){
    number.textContent = `${Math.floor(Math.random() * 1000) + 1}\n`;
    iterator += 1;
    if (iterator < nRuns) {
      setTimeout(textC, timeout)
    } else{
      iterator = 0;
      // you control the loop, so it's time for some extra text after it
      number.textContent += ` ... and that concludes this series of random numbers`;
    }
}

<p id="number"></p>
<button>Generate</button>

【讨论】：