CODEWITHSUNDEEP
javascriptjquery
patrick
patrick

Reputation: 16979

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

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?

Upvotes: 7

Views: 14942

Answers (8)

user512374
user512374

Reputation: 11

If you are trying to decode the obfuscated code that I think you are, then you are probably looking for this function definition...

$.fn.retarder = function(delay, method){ 
var node = this; 
if (node.length){ 
    if (node[0]._timer_) 
        clearTimeout(node[0]._timer_); 
    node[0]._timer_ = setTimeout(function(){ method(node); }, delay); 
} 
return this; };

I had to dig a little deeper to find it because it was generated dynamically within an eval().

So to answer your question, the "i" parameter is the "ul" object (in the code you posted).

If you look at the retarder function it returns "this", just like most other jquery plugins, so it maintains chain-ability of plugins.

isn't de-obfuscating fun?

Upvotes: 1

Topera
Topera

Reputation: 12389

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.

Upvotes: 0

Raoul Duke
Raoul Duke

Reputation: 4311

It's a function parameter.

Upvotes: 7

Rob
Rob

Reputation: 45779

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'); 
}

Upvotes: 12

Russell Leggett
Russell Leggett

Reputation: 8883

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.

Upvotes: 2

MartyIX
MartyIX

Reputation: 28646

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.

Upvotes: 4

muhmuhten
muhmuhten

Reputation: 3341

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

Upvotes: 5

Nathan Hughes
Nathan Hughes

Reputation: 96424

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.

Upvotes: 1

Related Questions