Me gustaría controlar las iteraciones de un bucle con un botón de clic.

Por ejemplo, el siguiente código, con solo un clic, imprime esto:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

HTML

<h1>Controlling loop iterations with "Click"</h1>    
<button type="submit" style="width: 80px" name="submit" onclick="main()">Submit</button>
<p id="text"></p>

JavaScript

function main() {
    document.getElementById("text").innerHTML = loopFunction();
}

function loopFunction() {
    var text = "";
    var i = 0;
    while (i < 5) {
        text += "<br>The number is " + i;
        i++;
    }

    return text;
}

Me gustaría hacer clic en el botón "enviar" y ejecutar el ciclo una iteración (paso) a la vez:

Por ejemplo:

click "submit" = The number is 0
click "submit" = The number is 1
click "submit" = The number is 2
click "submit" = The number is 3
click "submit" = The number is 4
-1
Vic 7 may. 2016 a las 22:10

4 respuestas

La mejor respuesta

Puede usar la función de generador para este propósito.

    function* loopFunction() {
        var i = 0;

        while (i < 5) {
            yield "<br>The number is " + i;
            i++;
        }
    }
    var iterator=loopFunction(); // init generator; no return
    function main(){
        var res=iterator.next(); // returns {value:<result>,done:false|true}
        if(!res.done)
            document.getElementById('text').innerHTML+=res.value;
        else
            document.getElementById('text').innerHTML+='<br />No more results';
        return false;
    }

    <button type="submit" style="width: 80px" name="submit" onclick="return main()">Submit</button> 
<!--"return" is important to avoid submission -->
    <p id="text"></p>
0
Alex Kudryashev 7 may. 2016 a las 20:27

Si todo lo que desea lograr es hacer una iteración a la vez, ¿por qué iterar?

Simplemente puede usar un variable global para retener su valor de conteo.

var count = 0;
        
function main() {
    var textElement = document.getElementById("text");

    if (count >= 5) {
        count = 0;
        textElement.innerHTML = "";
    }

    textElement.innerHTML += "<br>" + "The number is " + count++;
}
<button type="submit" style="width: 80px" name="submit" onclick="main();">Submit</button>
<p id="text"></p>

Lo que le daría The number is X por cada clic; como se muestra en el fragmento anterior.

A menos que haya entendido mal su enigma, esta parece ser la solución que está buscando.

0
Aleksander Azizi 25 may. 2016 a las 09:00

No hay necesidad de usar un bucle. Coloque i fuera de la función e incremente dentro de la función. Establezca i en 0, si es mayor que 5.

var text = document.getElementById("text");
var i = 0;
function main() {
    text.innerHTML += "The number is " + i + "<br>";
    if(i > 5) {
        i = 0;
        text.innerHTML = "The number is " + i + "<br>";
    }
    i += 1;
}

JSFiddle

0
Sun 7 may. 2016 a las 20:15

Cambia tu función así.

function loopFunction() {
    var text = "";
    var i = loopFunction.cachedValue ? loopFunction.cachedValue : 0;
    var max = 5;

    if(loopFunction.cachedValue >= max){
       return false;
    }

    text += "<br>The number is " + i;

    if(!loopFunction.cachedValue){
        loopFunction.cachedValue = 0;
    }

    loopFunction.cachedValue++;

    return false;
}
0
Ashot 7 may. 2016 a las 19:20