Can I use nested jquery.proxy

Question

Can I use nested jquery.proxy?

var obj = {
    init: function(element){
        element.on('click.mynamespace',$.proxy(function (event) {
          $(event.currentTarget).animate({
             scrollLeft: scrollPos
          }, width, $.proxy(this.myFunction,this));
        },this))
    },
    myFunction: function(){
        /*some code*/
    }
}

This is what I need for my project. I have used the nested $.proxy to make the code work. Because I need this context in myFunction which is a callback function for jquery animate api. Can I use in this way?

Answer 1

It should work, however I'd suggest that storing a reference to the object in the outer scope would be a more elegant solution. Note the definition and use of _obj in this example:

var scrollPos = 10;
var width = 20;
var obj = {
  init: function($element) {
    var _obj = this;
    
    $element.on('click.mynamespace', function(e) {
      $(this).animate({
        scrollLeft: scrollPos
      }, width, _obj.myFunction.call(this));
    });
  },
  myFunction: function() {
    // this function now executes within the context of the
    // element which has been animated in the click handler
    console.log(this.id);
  }
}

var $foo = $('#foo');
obj.init($foo);
$foo.trigger('click.mynamespace');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>