How to generate number without repetition with a pause button?

Question

I would like you to have a button with the function of PAUSE, and eliminate duplicate numbers.

A down counter that when I press the PAUSE it displays the result number with the TOTAL of generated lines .

function append(el) {
    //eu coloco os 16 primeiro digitos aqui, e ele gera mais 4 aleatorio
    var txt = "1212" + "9057" + "9240" + "8105";
    var x = Math.floor((Math.random() * 9000) + 1000);
    document.getElementById(el).innerHTML += txt + x + "<br>";
    //tempo de gerar numeros 1s
    setTimeout(function() {
        append("timeout");
    }, 1000);
    //AQUI EU QUERO UM FILTRA PARA NAO DUPLICAR
    // E UM BOTAO DE PAUSE E UM TXT COM TOTAL DE LINHAS GERADAS

}


append("timeout");

<p>GERADOR DE NUMEROS SEM REPETIÇAO E COM BOTAO DE PAUSE</p>
<hr>
<button name="pause" id="pause">PAUSE</button>
<div id="timeout"></div>
<div id="interval"></div>

Answer 1

What I would do is this:

First use setInterval instead of setTimeout:

var myVar = setInterval(function(){ gerarNumero() }, 1000);

When you want to stop, use clearInterval:

clearInterval(myVar);

The case of duplications is more difficult, I recommend to make an array and put each generated number in it, and then check if the new number is in the array, if it is not, return the number, if it is running the function again...

var numeros = [];

function gerarNumero(){    
    var x = Math.floor((Math.random() * 9000) + 1000);
    var existe = false;
    for(var i in numeros){
        if(numeros[i] == x) existe = true;
        break;
    }    
    if(!existe){
        numeros.push(x);
        document.getElementById(el).innerHTML += txt + x + "<br>";
    }else{
        gerarNumero();
    }
}

I didn’t test the code, but it’ll be something along those lines...

I hope it helps...

Answer 2

The setInterval Returns a range ID, and can be passed as a parameter in the function clearInterval(), if you want to stop your execution.

See working:

var stop;
var contador = 0;
function append(el) {
    contador++;
    var txt = "1212" + "9057" + "9240" + "8105";
    var x = Math.floor((Math.random() * 9000) + 1000);
    document.getElementById(el).innerHTML += txt + x + "<br>";

    stop = setTimeout(function() {
        append("timeout");
    }, 1000);


}
function pause(){
   document.getElementById('totalItens').innerHTML = 'Total de Itens:' + contador;
   clearInterval(stop);
}
append("timeout");

<p>GERADOR DE NUMEROS SEM REPETIÇAO E COM BOTAO DE PAUSE</p>
<hr>
<button name="pause" id="pause" onclick='pause()'>PAUSE</button>
<div id="timeout"></div>
<div id="interval"></div>
<div id="totalItens"></div>