title: Accessing `this` in Ajax callback, all within an Object
body: <p>I'm dealing with a problem about an Ajax callback inside of an Object.
  Please consider this code :</p>
  
  <pre><code>Search.prototype =
  {
      ask : function( query )
      {
          // Display loader
          $('.loader').show();
  
          $.ajax({
              dataType : 'jsonp',
              type : 'GET',
              url : 'http://api.deezer.com/search/track/',
              data : {
                  output : 'jsonp',
                  q : query
              }
          }).done(function(res) {
  
              this.loadResults( res );
              // [Error] Object success has no method 'loadResult'
  
          });
      },
  
      loadResults : function (res)
      {
          // Hide loader
          $('.loader').hide();
  
          console.log( res );
  
          // doing some stuff
          // ...
      }
  }
  
  var search = new Search();
  search.ask( 'eminem' );
  </code></pre>
  
  <p>I get an error <code>Object success has no method loadResult</code> , which makes sense as the callback is part of an anonymous jQuery function.</p>
  
  <p>But how to get my initial object instance ?</p>
  
  <p>I've been trying with a var that = this; before the Ajax call, but I't won't works for the same reasons.</p>
  
  <p>I don't know if it's possible to do this or if the problem comes from my code global organization. Feel free to advise me about the best practices :)</p>
  
  <p>Thanks by advance.</p>
  
  <h2>[Update (solved)]</h2>
  
  <p>I obfuscated some things in my code which I though it was unnecessary to post here, but I finally found out the problem a little bit earlier in my code.
  Sorry about that.</p>
  
  <p>Here's my full code, which is now working :</p>
  
  <pre><code>define(['jquery'], function($) {
  
      var Search = function()
      {
          this._keyDownTimer = 0;
          this._searchDelay = 1000; // ms
      };
  
      Search.prototype =
      {
          // The init function that I though it was unnecessary to post here. Sorry :/
          init : function()
          {
              $('#q').on('keydown', (function(evt) {
  
                  clearTimeout( this._keyDownTimer );
  
                  this._keyDownTimer = setTimeout( (function() {
  
                      this.ask( $('#q').val() );
  
                  }).bind( this ), this._searchDelay); /* &lt;-- Here's the solution.
                                                          I forgot to bind `this`
                                                          to the timeout callback function,
                                                          so the `this` under all of my code
                                                          was referring to the anonymous function
                                                          of this callback. */
  
              }).bind( this ));
          },
  
          ask : function( query )
          {
              // Display loader
              $('.loader').show();
  
              console.log(this); // Now `this` refers to my object :)
  
              var req = $.ajax({
                  dataType : 'jsonp',
                  type : 'GET',
                  url : 'http://api.deezer.com/search/track/',
                  context : this,
                  data : {
                      output : 'jsonp',
                      q : query
                  }
              });
  
              req.done(function(res) {
                  this.loadResults(res);
              });
          },
  
          loadResults : function (res)
          {
              // Hide loader
              $('.loader').hide();
  
              // doing some stuff
              // ...
          }
      };
  
      return new Search;
  
  });
  </code></pre>
  
  <p>Thanks for your replies, it really helped.</p>
  
  <p>Pb solved.</p>