Related
I have the following function
function hello() {
alert("hi!");
}
Take this piece of code:
var elem = document.getElementById("btn");
elem.onclick = hello;
My question might be a bit hard to understand, so bear with me:
What EXACTLY differentiates THIS piece of code from a normal call, or what makes this piece of code require a reference to the function variable rather than a regular call? (hello();)
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:
element.onclick = funcRef;
or
element.onclick = function () {
funcRef();
};
(but of course, it's best to use addEventListener and attachEvent)
Notice how both of them are references to functions, not calling.
When something expects a reference, you don't call it...you assign a reference to it (first example).
When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick - it's just an anonymous function.
Probably the more important part:
Some people think you want to do this:
element.onclick = funcRef();
But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn't what you want.
I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don't call it.
Do you want it to execute NOW? Then call it.
a=hello() means "Call hello() ASAP, and set its return value to a".
On the other hand, a=hello means "a is an alias for hello. If you call a(), you get the same results as calling hello()"
You use the latter for callbacks, etc, where you want to tell the browser what you want to happen after an event occurs. For example, you may want to say "call hello() when the user clicks" (as in the example). Or, "When the AJAX query returns a result, call the callback() function on the returned data".
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Do you need the function to run now?
Than add the () to execute it
Do you need to function to be referenced so it is called later?
Do not add the ().
Pretty much all statements in JavaScript have a return value. Unless otherwise specified, functions in JavaScript will return undefined when called. So, the only context in which it would make sense to call your function in this assignment statement if it were to return a function:
function hello() {
return function() {
alert("hi!");
}
}
elem.onclick = hello();
A reference to your function is needed somewhere no matter how it gets called. The difference here is that you are not explicitly calling the hello function. You are assigning a reference to that function to the elem DOM node's onclick event handler so that when onclick is fired for that Node, your function gets called.
hello() means you call that function, which means the function will be executed directly.
while when you have elem.onclick = hello, this is called a callback. Where hello doesn't get executed directly but only when a certain event is fired (in this case when there's a click on the element)
I'm very new to js so I'd appreciate some help. I have two blocks of code that I think should work identically but don't. Can someone explain how they're different? It looks like in the first piece of code, the parser enters the function directly.
function embedGameSwfAfterReg() {
embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
}
API.registerOnload(embedGameSwfAfterReg())
and
API.registerOnload(function() {
embedGameSwfAfterReg("{$swfLocation}", "100%", "100%", {$flashVars});
});
In the first code block, you're registering the result of the embedGameSwfAfterReg function (undefined) as the onload function (() means you're evaluating the function). Remove the parentheses to have the embedGameSwfAfterReg function itself registered:
API.registerOnload(embedGameSwfAfterReg)
This
API.registerOnload(embedGameSwfAfterReg())
runs embedGameSwfAfterReg, and then passes the return value (undefined since it doesn't return a value), to registerOnLoad
you want
API.registerOnload(embedGameSwfAfterReg)
which passes the function itself to registerOnload
Functions are objects in Javascript and can be passed directly by their names. When you add the parens, it instead runs the function and passes the result.
function embedGameSwfAfterReg() {
embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
}
API.registerOnload(embedGameSwfAfterReg)
and
API.registerOnload(function() {
embedGameSwfAfterReg("{$swfLocation}", "100%", "100%", {$flashVars});
});
would work the same way.
The difference is () which you have put with embedGameSwfAfterReg function in the first case
It actually calls the function there only but its different in the 2nd case.
I'm asssuming that the second example should be
API.registerOnload(function() {
embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
});
If so, then the difference is quite big. In the first case, the embedGameSwfAfterReg function is invoked and the embedGameSwf is called when you register. This is probably not what you want since the the return value of the function is undefined.
In the second case, the anonymous function is not invoked until later when the registerOnLoad event is raised. This is probably what you want.
API.registerOnload() takes a callback function as parameter, therefore you only have to pass in the function name as reference, otherwise the function is directly getting called when the code runs.
// Correct form is:
API.registerOnload(embedGameSWFAfterReg)
Your second sample already is an anonymous function that is handled like an function callback and therefore evaluated when API.registerOnload(callback) is calling the reference with callback() somewhere inside it's code.
Short answer:
First piece of code do nothing, because embedGameSwfAfterReg doesn't have a return statement. Probably it could even end up with an error if API.registerOnload doesn't accurately check its arguments before execution.
Second piece of code creates an anonymous-function that is passed as an argument to API.registerOnload method which (as far as I can see from method name) runs functions during an Onload event.
Long answer:
In the first piece of code you declare a new function named embedGameSwfAfterReg which resists in global-scope of your code:
function embedGameSwfAfterReg() {
// calls embedGameSwf function
}
after, you execute defined function and pass the result to registerOnload method of an object named API:
API.registerOnload(embedGameSwfAfterReg());
As you probably mentioned, declared function embedGameSwfAfterReg has no return statement, so the result of its execution will be undefined. In other words
API.registerOnload(embedGameSwfAfterReg());
is doing the same as
embedGameSwfAfterReg();
API.registerOnload();
so eventually it calls API.registerOnload() WITHOUT any arguments passed!
Second piece of code creates an anonymous function (functions are specific objects in JS, which can be passed to other functions/methods, have its own methods and executed). Then it passes created function (or better say a reference to the function) to registerOnload - method of an object called "API".
You should read topics about Objects, Function-type, scopes, anonymous functions and closures in JS. I would advise Mozilla JavaScript guide
Also feels free to play with a simplified example at jsfiddle which gives some practical hint on anonymous functions in JS.
I want to periodically query a PHP script for new messages. To do so, I'm using the setInterval() function and AJAX.
$(document).ready(function(){
var queryInterval = 1000; /* How fast we query for new messages */
setInterval(getMessages(), queryInterval);
function getMessages() {
console.log("tick");
}
});
However, when I look at the Javascript console, I'm only seeing "tick" once. I've made sure that the console doesn't ignore any more logs of the same strings, so if the code was working properly it should show "tick" in the console every second.
Anyone know what could be going wrong here?
Change:
setInterval(getMessages(), queryInterval);
To:
setInterval(getMessages, queryInterval);
Actually, setInterval isn't running getMessages at all (not even once). setInterval expects a reference to a function, but you're executing the getMessages function immediately and passing its return value to setInterval (which is undefined). That's what the parens after getMessage do.
Pass a reference to setInterval like this:
setInterval(getMessages, queryInterval);
If this is the only place that getMessages is used, then you could also write it like this:
setInterval(function() {
console.log("tick");
}, queryInterval);
Remove the () after getMessage
This calls getMessages, not schedules it. Remove the parenthesis.
setInterval(getMessages(), queryInterval);
setInterval(getMessages, queryInterval);
Although others have already covered this ground above, both window.setTimeout() and window.setInterval() require function references. Your code provides, instead, the return value from a function invocation.
When you wish to call, or invoke, a JavaScript function, you write, as expected:
DoMyfunction();
The JavaScript engine will execute that function upon encountering that line.
However, what setTimeout() and setInterval() require, is a reference to the function object corresponding to your function. Which you obtain via the following, and similar means:
myFunc = DoMyFunction;
That line copies a reference to the function object corresponding to DoMyFunction() into a new variable. Which you can then pass to setInterval() and setTimeout(), viz:
discard = window.setTimeout(myFunc, 1000);
That line above will direct the JavaScript engine to execute your intended function (namely DoMyFunction()) once, after 1 second has elapsed, and:
discard = window.setInterval(myFunc, 1000);
will direct the JavaScript engine to execute your intended function repeatedly, once every second.
You could, of course, achieve the same effect, without using a new variable, simply as follows:
discard = window.setTimeout(DoMyFunction, 1000);
etc.
If, however, you make the mistake of using:
discard = window.setTimeout(DoMyFunction(), 1000);
what happens instead is that DoMyFunction() is executed, and any return parameter arising therefrom is then passed to the window.setTimeout() function. Since window.setTimeout() is expecting a function object reference to be passed here, and instead receives whatever your function returns (or undefined if your function returns nothing), then the internal checking performed by setTimeout() (and setInterval()) will reveal that it hasn't received a function object reference here, and simply abort silently.
A far more insidious bug, of course, could arise if DoMyFunction() actually does return a valid function object! If you've written DoMyFunction() to do this, then that function object will be passed to setTimeout() instead, and that function will be run! Of course, you could use this intentionally, and write your DoMyFunction() as a closure, returning the actual function you want setTimeout() to execute as a function object return parameter, and if you use that approach, then the form:
discard = window.setTimeout(DoMyFunction(), 1000);
will no longer be erroneous.
Remember, every JavaScript function you write in your code, when that code is parsed, is associated with a function object by the JavaScript engine. To execute the function, use:
DoMyFunction();
To reference the function object instead, use:
DoMyFunction;
Those () can make a huge amount of difference according to context, as a result of JavaScript taking this approach to differentiating between a function object reference and a function execution instruction.
Check your code line:
setInterval(getMessages(), queryInterval);
The setInterval function requires you to pass the reference to your callback function.
When you pass getMessages(), You are actually calling the function and passing its returning object to the setInterval function.
So just change your line to:
setInterval(getMessages, queryInterval);
and it will works fine!
I'm reading javascript the good parts, and the author gives an example that goes like so:
['d','c','b','a'].sort(function(a,b) {
return a.localeCompare(b);
});
Which behaves as expected.
Now I have tried to do something like this - which is the next logical step:
['d','c','b','a'].sort(String.prototype.localeCompare.call);
And that fails with an error:
TypeError: object is not a function
Now I left wondering why...
Any ideas?
call needs to be bound to localeCompare:
['d','c','b','a'].sort(Function.prototype.call.bind(String.prototype.localeCompare));
The reason you are having a problem is that you are passing sort Function.prototype.call. As you may know, when no this is otherwise provided, it will be the global object (window in browser environments). Thus, when sort tries to call the function passed to it, it will be calling call with this set to the global object, which in most (all?) cases is not a function. Therefore, you must bind call so this is always localeCompare.
The reason it doesn't work is that String.prototype.localeCompare.call returns a reference to Function.prototype.call not to String.prototype.localeCompare as you might think.
You're passing a reference to the call function without retaining any relationship to the localeCompare method you intend it to be called upon. So sort will invoke the function referenced byString.prototype.localeCompare.call, but it will invoke it in the global context, not as the method of some function object.
As #icktoofay pointed out, you need to bind the call function to localeCompare. Here's a much oversimplified demonstration of how this is done without the bind method:
function simpleBind(fn, _this) {
return function() {
return fn.apply(_this, arguments);
}
}
['d','c','b','a'].sort(simpleBind(Function.prototype.call,
String.prototype.localeCompare));
Ok, solved it!
this does the trick:
['d','x','z','a'].sort(String.prototype.localeCompare.call.bind(String.prototype.localeCompare))
Cause when you think about it the sort function actually calls apply on call so it needs to be bound to the string object in order to execute in scope.
^_^
Here is my event and as you can see I want to send a function with it as a parameter.
onclick="deleteItems('image', 'size', function(){GetImageSize();})"
The delete function is in a js file. In my js file I want to call my GetImageSize() function.
var deleteItems = function(module, controller, callback) {
callback(); // ??????????
}
I want to do this so I can rebuild my table when my ajax call has finished.
Hope you guys can help me
Regards Örvar
You can refer to the function, without calling it--just don't use the ending parens. The parens mean you're calling the function. In the case of passing the function into another function as a callback you want to leave the parens off. (And you don't need the anonymous function declaration around it.) It should read:
onclick="deleteItems('image', 'size', GetImageSize);"
JavaScript functions are first class objects. You could store functions in variables and pass them around as arguments to functions. Every function is actually a Function object.
Therefore, if you have a GetImageSize() function, you can simply pass it to the deleteItems() function just like any other variable:
deleteItems('image', 'size', GetImageSize);