Question

I’m having a tough time wrapping my head around deferred objects in jQuery.

E.G,

I thought I could use the following syntax, but this is actually running both success and fail when a success happens. I thought fail would only run if the ajax call fails?

checkFoo(widget)
.success(step1, step2)
.fail(alert("failed"));

checkFoo is an AJAX call like so

function checkFoo(widget){
   return $.ajax({
          url: "foo.php",
          data: widget,
          format: json
   });
}

Answer 1

Your code

checkFoo(widget)
.success( step1(), step2() )
.fail( alert("checkfoo failed") );

calls step1 and step2 and alert immediately, and passes their return values into the success or fail methods. Exactly like

foo(bar());

…calls bar and passes its return value into foo.

If you want to tell jQuery to call step1 and step2 on success, and do the alert on failure, you pass in function references:

checkFoo(widget)
.success( step1, step2 )      // <== No parens, `step1` refers to a *function*
.fail( function() {           // <== Wrap a function around the alert
    alert("checkfoo failed");
});