Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post

    setTimeout not pausing?

    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?

    Code:
    DiceValue=RollDiceAnimated(1)
    
    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"
    
    	
    
    	if(RollIteration<10){
    
    		var tempval=setTimeout(RollDiceAnimated(RollIteration+1),RollIteration*RollSpeed)
    
    	}
    
    	else{return Die1+Die2}
    
    }

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    67
    Thanks
    20
    Thanked 1 Time in 1 Post
    add in return dicevalue; at the end

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    This is obviously homework, but this ought to push you forward:-

    Code:
    <html>
    
    <head>
    </head>
    
    <body>
    
    <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;
    
    RollIteration++;
    if (RollIteration < 10) {
    tim = setTimeout(RollDiceAnimated, (RollIteration*RollSpeed) )
    }
    else {
    DiceValue = Die1+Die2;
    alert ("Combined Dice Value = " + DiceValue);
    }
    }
    
    </script>
    
    </body>
    
    </html>

    "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)
    Last edited by Philip M; 01-21-2012 at 06:09 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    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.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    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.

    Code:
    MyVar=RollDiceAnimated(0)
    function RollDiceAnimated(RollIteration){
    
    	var Die1;var Die2
    
    	var RollSpeed=50
    
    	Die1=Math.ceil(Math.random()*6)
    	Die2=Math.ceil(Math.random()*6)	
    	document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"
    
    	document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"
    
    	
    
    	RollIteration++
    	if(RollIteration<10){
    
    		TempVal=setTimeout(RollDiceAnimated(RollIteration),(RollIteration*RollSpeed))
    alert(RollIteration*RollSpeed)
    	}
    
    	//else{return Die1+Die2}
    
    }

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Note the vitally important difference between

    Code:
    setTimeout(RollDiceAnimated(RollIteration), ...)
    and
    Code:
    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.

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    Ok. I think I got it all sorted out. Thank you much for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •