View Full Version : setTimeout not pausing?

01-21-2012, 05:51 PM
I wrote the code below to animate a roll of dice. It does iterate 10 times, as the code intends, but for some reason it doesn't pause in between.

Also, how can I get it to return the final dice value to the calling function?


function RollDiceAnimated(RollIteration) {

var Die1;var Die2

var RollSpeed=100

Die1=0;while(Die1<1 || Die1>6){Die1=Math.floor(Math.random()*7)}

Die2=0;while(Die2<1 || Die2>6){Die2=Math.floor(Math.random()*7)}

document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"

document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"


var tempval=setTimeout(RollDiceAnimated(RollIteration+1),RollIteration*RollSpeed)


else{return Die1+Die2}


01-21-2012, 06:15 PM
add in return dicevalue; at the end

Philip M
01-21-2012, 07:06 PM
This is obviously homework, but this ought to push you forward:-




<div id = "Dice"></div>

<script type = "text/javascript">

var RollIteration = 1;
var tim;

var DiceValue = RollDiceAnimated();

function RollDiceAnimated() {

var RollSpeed=100;

var Die1=Math.ceil(Math.random()*6);
var Die2=Math.ceil(Math.random()*6);

//document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"
//document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"

document.getElementById("Dice").innerHTML = Die1 + " " + Die2;

if (RollIteration < 10) {
tim = setTimeout(RollDiceAnimated, (RollIteration*RollSpeed) )
else {
DiceValue = Die1+Die2;
alert ("Combined Dice Value = " + DiceValue);




"Let us be thankful for the fools. But for them the rest of us could not succeed. " - Mark Twain, US humorist, novelist, short story author, & wit (1835 - 1910)

01-22-2012, 03:27 AM
This is obviously homework...
Yes, it is homework. But not school homework. I've been out of school for 20 years. This is my personal homework I've assigned myself. I'm pretty new to JavaScript, coming from a history in VB. To help myself learn, I am writing a board game using HTML/JavaScript.

I'll take a look at the code you provided in a bit. I appreciate your help.

01-22-2012, 09:39 PM
Ok, I reviewed your code a bit ...
1. Thank you for showing me "Math.ceil"! That does slim down that portion of my code a little. :)
2. What is the purpose of the parentheses around the setTimeout milliseconds value? I haven't seen how it makes any difference with or without the parentheses.
3. It seems my setTimeout is firing, but it's also acting like it's broken. If you look at my alert location, below the setTimeout line, it never actually alerts me. But if I put it above the setTimeout line, it gives me output. However, it's obvious the setTimeout function does work due to the multiple iterations.

Would love some logical explanation as to what's up.

function RollDiceAnimated(RollIteration){

var Die1;var Die2

var RollSpeed=50

document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"

document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"



//else{return Die1+Die2}


01-22-2012, 09:51 PM
Note that using Math.ceil like that will fail when the random value is exactly zero. Math random returns a value from 0to just less than 1 - which is why using Math.floor and adding 1 is slightly more accurate.

01-22-2012, 10:39 PM
Note the vitally important difference between

setTimeout(RollDiceAnimated(RollIteration), ...)


setTimeout(RollDiceAnimated, ...)

This is one of the top beginner's errors. The first one is an immediate call to the function RollDiceAnimated whereas the second is only a REFERENCE to this function. The function will only be called AFTER the end of the timeout.

01-24-2012, 05:31 PM
Ok. I think I got it all sorted out. Thank you much for your help!