Example parses the use of the proxy () function in jquery _jquery

Jquery.proxy (), takes a function, then returns a new function, and the new function always maintains a specific context.

Jquery.proxy (function, context)

function that is going to change the context of contexts.

The contextual context of the context function (' this ') is set to this object.

Jquery.proxy (context, name)

The contextual context of the context function is set to the object object.

Name that will change the context of the function name (this function must be the property of the previous parameter ' contextual ' object)

This method is usually used when attaching an event handler to an element, and the context context is actually pointing to another object.

In addition, JQuery ensures that even if you bind a function that has been processed by Jquery.proxy (), you can still use the original function to unbind it correctly.

Parameters:
the Function:function type needs to change the function of the context object.
Context: Any type is specified as the contextual object of the function setting.
The name:string type needs to change the function name of the context object (it should be a property of the contexts).
Additionalarguments Optional/arbitrary type specifies the parameters to be passed in when the function is invoked, and there can be any number of arguments.

Precautions:
The parameter additionalarguments is supported from JQuery 1.6.
This method is very useful for pointing the context of an event handler to another object when attaching an event-handling function. In addition, jquery ensures that if you bind an event by using the "proxy" function returned by Jquery.proxy (), jquery will still be able to unbind it correctly if you pass the original function at the time of the unbind.
Starting with jquery 1.9, the context of the agent function does not change if it is null or undefined. This will allow Jquery.proxy () to pass only the parameters of the function without changing the context of the function.

Instance

Let's take a look at an example:

Normal
this uses $ (' #Haorooms '). Click (function () {

  //This is what we expect, the current element of this.

  $ (this). addclass (' Anewclass ');

});
This is not the expected
this $ (' #Haorooms '). Click (function () {

  settimeout (function () {

     /) This point is inside the settimeout function, Rather than the preceding HTML element

    $ (this). addclass (' Anewclass ');

  }, 1000);

};

What to do now, the usual practice is this:

$ (' #Haorooms '). Click (function () {
  var = this;  Set a variable to point to this required this

  settimeout (function () {

     //This refers to the interior of the settimeout function, not the preceding HTML element

    $ (that). AddClass (' Anewclass ');

  }, 1000);

};

However, in the case of using the jquery framework, there is a better way to use the $.proxy function.

There are two kinds of syntax:

Jquery.proxy (function, context)
/**function a function that will change contextual contexts. The
contextual context of the context function (' this ') is set to this object.
the

contextual context of the **/jquery.proxy (context, name)
/**context function is set to this object.
**name is going to change the function name of the contextual context (this function must be the property of the previous parameter ' context ' * * object)
**/

The example above can be modified in this way:

$ (' #Haorooms '). Click (function () {

  settimeout $.proxy (function () {

    $ (this). addclass (' Anewclass '); 

  } , this), 1000);