How the (function(){ .......... }); works - jquery-ui

Question

Hey guys i am a new guy trying to figure out some method that's confusing
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
This is a piece of code i found and it was used like
$("input").keyup(function() {
delay(function(){
alert('works');
}, 1000 );
});
I know the above code works as ive tested it but i dont understand what exactly does (function(){ mean,and how does callback have the
function(){alert('works');}
as the parameter when no parameter was accepted before..!
thanks guys

Answer 1

a function is just a way to wrap many lines of code together.
You can have it anonymous and execute instantly:
(function (){ alert("I'm working!");})();
You can then give it a name like:
function myFunction(){ alert("I'm working!");}
and you can call it with:
myFunction();
you could do
$("input").keyup(function() {
delay( myFunction, 1000 );
});
and it would run myFunction after 1000ms once a key is lifted up when typing in the input.

Answer 2

Assign to delay the invocation of the anonymous function that closes over the timer variable and returns a second anonymous function which takes two parameters, callback and ms (therefore, the type of delay is also a function of two arguments) which clears the handle associated with the timer variable, then invokes the callback. Useful if you will have something that calls delay faster than the timeout, and you only want to respond to the most recent call.
We could do this to make it (slightly) more clear:
//define the closure
var closure = function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
};
//invoke the closure to return the function that we will actually use as delay
var delay = closure();

Answer 3

delay is set to a function which is returned by the immediately executing function (function(){ …return function()... })(); The function immediately executing one, also creates the closure around the timer variable.
the (function(){ … })(); is not exactly a window.ready. Rather it executes wherever it is put. Notice the () at the end. And it returns another function which is hold inside variable delay.
Then on input key up on an an alert is displayed after 1 second, however to prevent the alert getting displayed several times if the up key is pressed several times within 1 second the closure around timer is used to cancel the invocation of previous timer using clearTimeout
$("input").keyup(function() {
delay(function(){
alert('works');
}, 1000 );
});
//delay takes 2 params callback and ms
//ms:1000
//set the callback as:
function(){
alert('works');
}
now delay invokes following code that has already created closure around timer var.
function(callback, ms){
clearTimeout (timer); //attempts to cancels previous timer event that would invoke alert callback
timer = setTimeout(callback, ms); //call back the above set callback after ms value i.e. 1000 milli seconds
};