Question

I know that it works. I have implemented it successfully.

$("#vehicle_application_product_id").autocomplete({
      minLength: 2,
      source: function(request, response) {
          var term = request.term;
          if (term in cache) {
              response(cache[term]);
              return;
          }

          lastXhr = $.getJSON("/products/get_json_list", request, function(data, status, xhr) {
              cache[term] = data;
              if (xhr === lastXhr) {
                  response(data);
              }
          });
      }
  });

I am like a script kiddie with some of this stuff. I would NEVER be able to write that anonymous function myself, because of the following reasons:

1) How did this person know to put the parameters “request” and “response” in the spec?

2) The lines beginning “lastXhr = ” is really mystifying. There is yet another anonymous function at the end. I realize that is probably a callback, something that is executed after the request is sent to the specified URL.

3) That last conditional in the anonymous function:

if ( xhr === lastXhr ) {                                                                                      
    response( data );
}

What the heck is that? If then third parameter, xhr, from this anonymous block is equal to the vaue returned by the .getJSON call ENCOMPASSING this anonymous block, return the data in the response?

That is really the most difficult part to wrap my head around. And I notice that’s 3 equals signs. This looks like pretty advanced code concepts, I would just appreciate what the rationale behind this is so that I can become a better coder.

Answer 1

1. The parameters request and response will be passed to the function assigned to the source option as documented here. In essence, the plugin promises to pass these two parameters to the callback and that’s how you signal that you do want to get hold of them.

2. That function is a callback scheduled to be invoked when the request completes, not after it’s simply sent. Also, when calling getJSON, the code assigns the resulting object to the lastXhr variable so that it remembers which was the last request that it made.

3. Inside the callback, you have a reference to the request that completed in the form of the parameter xhr. So that if is equivalent to writing:

   if (the request that completed is the last request made) {
       // ...
   }
   

   Why do this? To make sure that you do not act on the results of the request if, due to the response taking too long to come back and the user typing too fast, you have multiple outstanding requests. In such a scenario, you are really not interested in the results of any but the last one you made.

   How does the callback have access to the variable lastXhr from an outer scope? This is due to closure.

4. What’s with the three equal signs? That’s the identity operator.