comment combiner une boucle do while et une fonction setInterval timer

Question

J'essaie de simuler un jet de dé en combinant une boucle do while et une fonction setInterval.

le but est le suivant: l'utilisateur clique sur le bouton de lancement de dés. ils voient une série de nombres, puis le rouleau s'arrête et renvoie une valeur. Mon idée était d'utiliser la boucle 'do while' pour contrôler combien d'itérations se produisent avant que les dés ne s'arrêtent. J'ai essayé quelques choses différentes mais rien n'a fonctionné jusqu'ici. ma dernière tentative est ci-dessous.

function diceRoll(){ 
    theNum = Math.floor(Math.random() * 6) + 1; 
    counter = counter + 1; 
    console.log(theNum); 
    console.log(counter); 
} 

$(document).ready(function(){ 
    counter = 1; 
    myVar = ''; 
    $('#start').click(function(){ 
     do { 
     // 
     myVar = setInterval(function(){ diceRoll() }, 500); 
     } while (counter < 10) 
    }); 

Answer 1

Oublier la boucle do while. Vous avez juste besoin de garder une trace de «état» afin que vous puissiez agir en conséquence à chaque intervalle. Le counter ira bien dans ce cas simple.

Si vous utilisez un intervalle, vous voulez effacer l'intervalle lorsque vous avez terminé. Il serait également logique de «bloquer» le bouton de démarrage alors que les dés en roulant.

Voici un exemple modifié de votre code qui devrait réaliser ce que vous essayez de faire:

var vals = ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685"]; 
 

 
function setValue(num) { 
 
    $("div").text(vals[num - 1]); 
 
} 
 

 
var intervalId; 
 
var counter = 1; 
 

 
function diceRoll() { 
 
    theNum = Math.floor(Math.random() * 6) + 1; 
 
    counter = counter + 1; 
 
    setValue(theNum); 
 
} 
 

 
$(document).ready(function() { 
 

 
    $('#start').click(function() { 
 
    if (intervalId) 
 
     return; // Don't allow click if already running. 
 

 
    intervalId = setInterval(function() { 
 
     if (counter < 10) 
 
     diceRoll(); 
 
     else { 
 
     // Reset state ready for next time. 
 
     clearInterval(intervalId); 
 
     intervalId = null; 
 
     counter = 1; 
 
     } 
 
    }, 500); 
 
    }); 
 
});

div { 
 
    font-size: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="start">Click to Roll</a> 
 

 
<div> 
 

 
</div>

Answer 2

setInterval retourne immédiatement, donc tout votre code fait est le coup d'envoi d'un très grand nombre d'itérations (la variable counter ne sera pas incrémenté avant que beaucoup de versions d'exécution)

Vous devriez juste rappeler la même fonction avec setTimeout à partir de la fonction elle-même.

var counter = 0; 
 

 
function diceRoll(){ 
 
    theNum = Math.floor(Math.random() * 6) + 1; 
 
    counter = counter + 1; 
 
    console.log(theNum); 
 
    console.log(counter); 
 
    if(counter<10){ 
 
     setTimeout(diceRoll,500); 
 
    } 
 
} 
 

 
diceRoll()

Answer 3

Vous n'avez pas besoin do while. Vous pouvez simplement gérer l'indexation vous-même. fiddle

function diceRoll() { 
    theNum = Math.floor(Math.random() * 6) + 1; 
    console.log(theNum); 
} 

$(document).ready(function() { 
    var counter = 1; 

    var interval = setInterval(function() { 
    if (counter < 10) { 
     diceRoll() 
     counter = counter + 1; 
    } else { 
     clearInterval(interval); 
    } 
    }, 500); 

}); 

Answer 4

Deux problèmes dans votre exemple,

Le premier problème est, setInterval gardera exécuter la fonction donnée après une certaine fonction, vous n'avez pas besoin do while à des fins similaires. Le second problème est que, au lieu d'utiliser setInterval pour continuer à exécuter et vérifier si le compteur < 10 à clearInterval, vous pouvez utiliser setTimeout à la place, pour créer un autre délai lorsque le compteur < 10 et appelez la fonction diceRoll elle-même.

var counter, 
    timeout; 

function diceRoll(){ 
    theNum = Math.floor(Math.random() * 6) + 1; 
    counter = counter + 1; 
    console.log(theNum); 
    console.log(counter); 
    if (counter < 10) { 
     timeout = setTimeout(diceRoll, 500); 
    } 
} 

$(document).ready(function(){ 
    $('#start').click(function(){ 
     if (timeout) { 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     counter = 0; 
     diceRoll(); 
    }); 
}