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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Function won't work when parameters fed from another function.

    Trying to emulate a for loop without locking up the page, for use in gaming stuff. My emulated for loop (which I call a five loop, hardy har har) works utterly perfectly...if you manually feed it variables. When I create another function to feed it variables, and run that function, it doesn't work properly.

    Here, go to the W3C TryIt editor and plug in my code...
    Code:
    <!DOCTYPE html><html><body>
    
    
    
    <script type="text/javascript">
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 200;
    canvas.height = 200;
    document.body.appendChild(canvas);
    // Creates the canvas and sticks it on the page.
    
    var whatevs = -1;
    var circleX = canvas.width / 2;
    var circleY = canvas.height / 2;
    var circleRadius = 24;
    var circleColor = "#FF0000";
    // Starts the circle in the center of the canvas and colors it red.
    
    
    function clearScreen(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);}
    // Erases the canvas. Kind of...kind of an obvious one, there >_>
    
    
    function drawCircle(){
    ctx.beginPath();
    ctx.arc(circleX, circleY, circleRadius, 0, Math.PI*2, true);
    ctx.fillStyle=circleColor;
    ctx.fill();}
    // Draws a filled circle with circleRadius radius at (circleX, circleY).
    
    
    // Begin messy test stuff...
    
    
    function blueCircle(){
    ctx.beginPath();
    ctx.arc(36, 36, 24, 0, Math.PI*2, true);
    ctx.fillStyle="#ABCFED";
    ctx.fill();}
    
    
    var loopThisFunction = blueCircle;
    var loopEndValue = 100;
    var whatevs = 0;
    
    
    /*function fiveLoop(loopMe,thisManyTimes){
    var loopThisFunction = loopMe;
    var loopEndValue = thisManyTimes;
    var whatevs = 0;}
    
    fiveLoop(blueCircle,100);*/
    
    
    function fiveLoopChecker(){
    switch (true){
    case (whatevs < 0):
    return false;
    break;
    case (whatevs > -1 && whatevs < loopEndValue):
    loopThisFunction();
    whatevs ++;
    break;
    case (whatevs == loopEndValue):
    whatevs == -1;
    break;}}
    
    
    function jamesLoopton(){
    clearScreen();
    drawCircle();
    fiveLoopChecker();}
    // The game loop.
    
    
    setInterval(jamesLoopton, 16);
    // Runs the game loop every sixteen milliseconds. Almost synchs up with 60 FPS.
    
    
    </script></body></html>
    You should see a red circle that just stays there (ignore it) and a blue circle that disappears after awhile. That blue circle is being drawn there for a limited period of time by my fiveLoop. Which works wonderfully when we manually feed it values...
    Code:
    var loopThisFunction = blueCircle;
    var loopEndValue = 100;
    var whatevs = 0;
    However, if you comment out that portion, and un-comment-out the following...
    Code:
    function fiveLoop(loopMe,thisManyTimes){
    var loopThisFunction = loopMe;
    var loopEndValue = thisManyTimes;
    var whatevs = 0;}
    
    fiveLoop(blueCircle,100);
    Nothing happens! And if you change "fiveLoop(blueCircle,100);" to "fiveLoop(blueCircle(),100);" the blue circle just flashes for one frame, then disappears.

    So why doesn't the fiveLoop function work?

    I will admit, I'm pretty dang tired (sleep disorder), so maybe I'm just not formatting my function right or something.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you are expecting the values for your loopThisFunction and loopEndValue variables to be assigned in the fiveLoop function, but to be available to the fiveLoopChecker function, but in the fiveLoop function you declare them as variables that are local only to that function (and sop not available anywhere else).

    The easy way out would be to declare them as globals, much like you did when you were hardcoding them:

    Code:
    var loopThisFunction;
    var loopEndValue;
    var whatevs = 0;
    
    function fiveLoop(loopMe,thisManyTimes){
    loopThisFunction = loopMe;
    loopEndValue = thisManyTimes;
    whatevs = 0; //not really sure what this does, but anyway...
    }
    
    fiveLoop(blueCircle,100);
    
    //etc...
    btw, you should try using a browser for development, rather than the W3 schools page - that way you can use the error console and see the problems for yourself
    Last edited by xelawho; 04-20-2013 at 06:53 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    And if you would like to avoid "polluting" your global name space with all those little variables, then just enclose it all in an outer (possibly anonymous) function.

    [It's bad practice to put lots of variable in global name space, as it just increases the odds that your variable names will collide with those of other JS code which is also sloppily using too many such global variables.]

    So, just as an example, you could code like this:
    Code:
    <script type="text/javascript">
    (
      function( ) /* anonymous master function -- establishes own scope */
      {
          var loopThisFunction;
          var loopEndValue;
          var whatevs = 0;
    
          function fiveLoop(loopMe,thisManyTimes){
              loopThisFunction = loopMe;
              loopEndValue = thisManyTimes;
              whatevs = 0; //not really sure what this does, but anyway...
         }
    
         ... etc. ...
    
         fiveLoop(blueCircle,100);
    
      } /* end of the anonymous master function */
    )(); // and this self-invokes that anonymous function 
    </script>
    And, of course, when the anonymous function gets invoked, all the code in it gets executed (which is mostly just defining variables and functions) including, there at the end, the call to fiveLoop that starts everything running.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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