Jump to content
Sign in to follow this  

Mistake in the last Example on Timing Events for Javascript Tutorial?

Recommended Posts

The last example for window.clearTimeout() method has an explanation that appears to be inconsistent with the 'try it yourself' example on the JavaScript Timing Events page. I have put the text needing corrected in red:

How to Stop the Execution?

The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.


The window.clearInterval() method can be written without the window prefix.

To be able to use the clearInterval() method, you must use a global variable when creating the interval method:

myVar=setInterval("javascript function",milliseconds);

Then you will be able to stop the execution by calling the clearInterval() method.


Same example as above, but we have added a "Stop time" button:

<p id="demo"></p><button onclick="myStopFunction()">Stop time</button><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}function myStopFunction(){clearInterval(myVar);}</script>
Try it yourself »


If I have been learning my lessons correctly, typing in var makes the variable local. If this is the case, then it would seem the clearInterval() worked without setting a global variable.


Does this need updated?

Share this post

Link to post
Share on other sites

when you use var outside of any function block scope {}, then it is implied global, as a property of the window object. that's why it works with var in that example.

Share this post

Link to post
Share on other sites

A few things to consider:


1. If you declare a variable inside a function then it only exists inside that function. This is called a "local variable."

2. If you declare a variable outside of all functions then it is a global variable. A global variable can be seen everywhere unless it is overridden by a local variable that has the same name.

3. In Javascript, if you use a variable without declaring it (with var) then it will be a global variable.

<script>var pet = 'global dog';function myFunc01(){alert('My pet is a '+ pet);}function myFunc02(){var pet = 'local cat';alert('My pet is a '+ pet);}var si = setInterval(myFunc01, 5000);setTimeout(myFunc02, 16000);setTimeout(function(){clearInterval(si);alert('setInterval cleared');}, 25000);</script>

To be able to clear the timing functions you need to assign a variable that will persist -- such as a global variable. An ordinary local variable inside a function does not exist except when its enclosing function is executing.

Share this post

Link to post
Share on other sites

That's a pretty bad lesson, it is absolutely not a requirement that you need to use a global variable. There's no reason to even suggest that. The only requirement is that the piece of code using clearInterval or clearTimeout needs to have the interval ID variable in scope. A closure would probably be the preferred way to accomplish that. Using global variables should generally be avoided as much as possible, so that your code doesn't interfere with anything else on the page. Here's a version that doesn't use any global variables at all, instead of uses an IIFE to make its own scope. It's almost the same code, just removed from the global scope so that it doesn't overwrite anything else. The click handler needs to be copied to the global scope in this case because of how it's defined on the button, it could be attached in Javascript and wouldn't need to be moved to the global scope though.

<script>(function() {  var myVar=setInterval(function(){myTimer()},1000);  function myTimer()  {    var d=new Date();    var t=d.toLocaleTimeString();    document.getElementById("demo").innerHTML=t;  }  function myStopFunction()  {    clearInterval(myVar);  }  window.myStopFunction = myStopFunction; // make this available in the global scope})();alert(myVar); // undefined, myVar is not in the global scope</script><p id="demo"></p><button onclick="myStopFunction()">Stop time</button>

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...