jQuery done() seems to fire before request is sent

Question

I'm trying to hide an ajax loader after a request is done, but the done() callback is firing immediately after the blur() event, before the request is made. I made my controller action sleep for 5 seconds to be sure this was the case, and it is. I would think it should fire only after the result comes back from the server, or 5 seconds later. What's going on?

  $('#order_billing_post_code').on 'blur', ->
    field = $(this)
    post_code = field.val()
    type = field.data 'address-type'

    if post_code.length is 8
      xhr = $.ajax
        url: "/address_lookups/new"
        data:
          post_code: post_code
        beforeSend: ->
          field.siblings('i.address-ajax-loader').show()
        success: (data) ->
          parse data, type
        dataType: "json"

      xhr.done(
        alert "done"
      )

Answer 1

I'm not familiar with this syntax (Coffeescript?) but it looks like you're passing the result of calling alert "done" immediately to xhr.done(), instead of passing a reference to a function that calls alert.

Try:

xhr.done ->
  alert "done"

In vanilla JS, it's as if you had written:

xhr.done(alert("done"))

instead of:

xhr.done(function() {
    alert("done");
});

The alert call happens immediately, and the result is passed to xhr.done, which then does nothing useful at all.