What is "i" in "function(i)" in the following JavaScript?

Question

In the following code there is "function(i)", but "i" hasn't been declared anywhere previous to this statement.

ul.css({width: 10, overflow: 'visible'}).retarder(100, function(i){
   i.css('visibility',  'visible').animate(
      {width: ul[0].wid,left:-50},
      {duration: 500, complete : function(){
         ul.css('overflow',  'visible');
      }}
   );
});

It looks like it could be similar to a c++ "this" statement. Is that correct at all?

Answer 1

The variable i represents the actual object (like keyword this)

---

Explain more:

1) Is a parameter to an anonymous function, as we can see:

.retarder(100, function(i){...})

2) Is a reference to current object (this).

When this jquery plugin finishes, it calls the callback function, using:

(callbackFunction)(this)

Where this is parameter.

Answer 2

The variable i in the anonymous function declaration function(i) is the name used for the first parameter inside the function body. It does not correspond to any variable elsewhere in your page.

Answer 3

It looks like a function declaration:

function(i)
{
  // .....
}

So i is a value being passed into the function (which is being declared inline as an anonymous function) as its first parameter, presumably by the inner workings of the retarder method that you're passing the function into.

Re-writing the code so it's a bit more readable makes this a bit clearer:

ul.css(
  {
    width: 10, 
    overflow: 'visible'
  }
).retarder(100, function(i)
  { 
    i.css('visibility', 'visible').animate(
      {
        width: ul[0].wid,
        left:-50
      },
      {
        duration: 500, 
        complete: function()
          { 
            ul.css('overflow', 'visible'); 
          }
       } 
    );
  }
 );

And you can then rewrite it to be even clearer:

ul.css(
  {
    width: 10, 
    overflow: 'visible'
  }
).retarder(100, functionToPassToRedtarder);

function functionToPassToRetarder(i)
{
  i.css('visibility', 'visible').animate(
    {
      width: ul[0].wid,
      left:-50
    },
    {
      duration: 500, 
      complete: functionToPassToComplete
    } 
  );
}

function functionToPassToComplete()
{
    ul.css('overflow', 'visible'); 
}

Answer 4

It's a function parameter.

Answer 5

it creates an anonymous function which take a single argument, which is then to be referred to as i in the function.

Answer 6

i is just a function parameter that is passed by retarder function to the anonymous function.

What it does is:

ul.css({width: 10, overflow: 'visible'}).retarder(100, callback_function);

and callback is defined via anonymous function:

function(i) { ... }  

So that i is definition of the parameter of the anonymous function.

Answer 7

The reason you may not understand this is if you are unfamiliar with the use of anonymous functions in JavaScript. You are probably more familiar with something like:

function double(i){
    return i + i;
}

i is a parameter to the function double. In JavaScript, the same function could be done like:

var double = function(i){
    return i + i;
};

In this case an anonymous function is created and then assigned to a variable double. i is still just a parameter. Both can then be called like double(3).

In the example you provided, instead of assigning the anonymous function to a variable, it was passed as an argument to another function.