SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript timer countdown

    Trying to write a javascript countdown script. Here's what I got:

    Code:
    function timer(position,count)
     {
      var newCount
      if (position == 'start') {
       document.getElementById("timer").innerHTML=count
       newCount = count - 1
       alert(newCount);
       setTimeout("timer('go',newCount)",1000)
      }
      
      if (position == 'go') {
       document.getElementById("timer").innerHTML=count
      }
     }
    </script>
    </head>
    
    <body onload="timer('start',10);">
    onload starts the timer at 10 and then my first step was to have to go down to 9. But I get this javascript error message:

    Error: newCount is not defined

    But I have it as an alert right before I call it and it alerts the variable just fine. Why would it say it isnt defined?

    Live script: http://webwork.shasta.com/mmo/battle.asp

  2. #2
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sabastious, it always makes sense to search the forums before posting. Your question was answered only yesterday:

    http://www.sitepoint.com/forums/showthread.php?t=450833

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I have it as an alert right before I call it and it alerts the variable just fine. Why would it say it isnt defined?
    The alert() executes, and then the setTimeout() on the next line executes, and the setTimeout() tells js to execute timer() at some future time. timer() doesn't execute now. When timer does execute, it tries to access newCount, and at that future time newCount doesn't exist anymore.

    A function specified in a setTimeout() executes at a future time, and when it executes it executes in the global scope. That means that the function can only see the variables in the global scope. The global scope includes anything that is defined outside of a function. For instance, if you have this setup:
    Code:
    var newCount = 10;
    
    function timer()
    {
            //code
    }
    then newCount is in the global scope. However, if you have this setup:

    Code:
    function timer()
    {
            //code
    }
    
    function someFunc()
    {
    	var newCount = 10;
    }
    then newCount is not in the global scope.

    In your case, when the timer() function specified in the setTimeout() executes, it has two parameters: "go" and newCount. So to start execution of the function, js has to retrieve the value for the variable newCount and pass it to the function. js looks around the global scope for the value of newCount, and since there is no variable defined outside of any function called newCount, you get an undefined error.

    You may wonder why the solution you were directed to doesn't have the same problem. There is another rule: if you define a function inside of another function, then the inner function carries a snapshot of the values of the surrounding function's parameters and local variables with it. So, when the inner function executes at some future time it can look at the snapshot to get the values of the variables.


Bookmarks

Posting Permissions

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