как сделать генератор чисел похожим на генератор чисел Google - PullRequest
Новая
       7

как сделать генератор чисел похожим на генератор чисел Google

0 голосов
/ 17 июня 2020

Я пытаюсь создать какой-нибудь генератор чисел на веб-странице. Я хочу показать как пять чисел перед появлением сгенерированного числа. Для лучшего представления вы можете посмотреть на генератор Google . Когда вы нажимаете кнопку "Создать", перед сгенерированным числом отображается 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;
}

Спасибо за любую помощь!

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

Проблема с setInterval() заключается в том, что он будет продолжаться вечно, пока не будет очищен, в результате чего вы будете продолжать генерировать случайные числа. Вместо этого вы можете использовать setTimeout(), но установите время ожидания для изменения в зависимости от значения i в for l oop. Таким образом, каждый интервал будет происходить через 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>
1 голос
/ 17 июня 2020

Не используйте al oop ( почему бы и нет? ). Просто вложите 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>
...