如何使数字生成器类似于谷歌的数字生成器。

Question

我试图在网页上创建某种类型的数字生成器。我想在生成的数字显示之前显示五个数字。为了更好的想象，你可以看看 谷歌生成器. 当你点击生成时，在生成的数字前会显示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;
}

谢谢大家的帮助

Answer 1

问题与 setInterval() 是它将永远持续下去，除非被清除，导致你不断产生随机数。相反，你可以使用 setTimeout()的值来改变，但设置超时，根据 i 在for循环中。这样一来，每个间隔将在另一个间隔后50毫秒发生。

见下面的例子。

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>

Answer 2

不要使用循环 (为什么不呢？). 只是巢 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>