setTimeout() with a pointer to a function : Function « Language Basics « JavaScript DHTML






  1. JavaScript DHTML
  2. Language Basics
  3. Function

setTimeout() with a pointer to a function

   

<html>
<head>
<script type="text/javascript">
function timeout(){
    window.setTimeout("show_alert()",2000)
}
function show_alert(){
    alert("hi")
}
</script>
</head>

<body>
<form>
<input type="button" onclick="timeout()" value="Count down">
</form>
</body>

</html>


////////////////////////////////////////
Hi Sirs/Madams of java2s.com,
 
I came across an article on your site about "pointers to a function in
javascript", in use with setTimeout*.
Well, that very title shows you do not understand th parts of
javascript you are talking about well enough. However, when actually
reading the article it is revealed that your misunderstanding goes
even deeper.
That's why I decided to send you this email and learn you a thing or
two about javascript.
 
First off, your example resorts to the use of setTimeout("show_alert()", 4000).
Obviously you are passing a string, not a pointer to a function. Now
there are two ways to call setTimeout, one with a string and one with
a function. The last version is pretty much like using a pointer to a
function, but there are some differences. However, when using that
title the correct way to call setTimeout, would have been
"setTimeout(show_alert, 4000)". And yes, it would actually have had
the same result as the given code. Also, do note that tis circumvents
the indirect usage of eval (which you probably know is evil), as eval
is what is used to make sense of the string that can be passed to
setTimeout.
 
Now as for function pointers in javascript. Javascript does not know
any pointers. This includes function pointers. However, this is no
loss, because javascript functions are different things than functions
are in most languages.
In javascript functions are values, just like numbers, booleans and
objects are. They can be treated as such in every respect and
additionally you can call them. As such, you can have function
constants. These are commonly known as anonymous functions and look
like this:
 
function (args) {/*body*/}
 
It also means you can assign a function value to a variable. Logically
this looks like this:
 
var variable = function (args) {/*body*/}
 
And now for the real magic of javascript, this line above is the real
meaning of the standard way to declare a function. Confused? Let me
show you:
 
function functionName (args) {/*body*/}
 
does the exact same thing as:
 
var functionName = function (args){/*body*/}
 
This alternate syntax was simply added to have the functions appear to
work as in other languages, but as you have jut seen, they do work
slightly different. However, this way in which they do work is a more
powerful way. For example, we do not need a concept such as a function
pointer, we can simply require an argument to be a function. From
there on, a programmer can decide to supply a variable which holds a
function (the thing I did above in your sample), or one can decide to
supply a function literal. In that case you example would look like
this:
 
function timeout()
{
   setTimeout(function()
   {
       alert("hi");
   }, 4000);
}
 
Of course, the spacing could be altered to put all of this on one line.
 
I hope I taught you a little about javascript and I hope this may
serve as a way to decrease the amount of faulty information about the
intricacies of javascript in the top results of google search.
 
Yours sincerely,
 
Jasper Horn
jasperhorn at gmail.com








Related examples in the same category

1.Show Arguments
2.Function That Wraps Document.Write, Adding a Line Break
3.Define function in JavaScript
4.Funciton with arguments
5.Pass variables to a function, and use these variable values in the function
6.Function that returns a value
7.A function with arguments, that returns a value
8.A Function Can Be Set Up to Accept a Variable Number of Arguments
9.Accepting Either One or No Arguments
10.Functions That Return Values Can Be Used in Expressions
11.Using an Argument with a JavaScript Function
12.Declaring a Function in the 'head' Block
13.Passing by Reference Versus Passing by Value
14.A Function Definition
15.Using the Function Object
16.Passing the Form Object as a Parameter
17.Calling a Function from an Event Handler
18.A Function's arguments and caller Properties
19.Variable Scope Workbench Page
20.Calling a Generalizable Function
21.Simplest function
22.Pass string value in and return string value out
23.A function with only one statement
24.Call your function
25.Nested function call
26.Define a function to accept the string value
27.Call a javascript function with javascript:void()
28.Return an incremented value
29.Check the function parameters
30.Save returned value from a function to a variable
31.Invoking third argument as function
32.Array filter and callback functions
33.Function is Object
34.Call function in body onload event