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

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 2

It's a function parameter.

Answer 3

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