How would I use the jQuery.Deferred Object to wait for an asynchronous function call to complete?

I'm using the Plupload file uploader within a form. I want to customize it such that when the form is submitted, i.e. when the "Submit" button is clicked, the first thing that happens is the file uploading, followed by the submission of the form.

From what I can tell, and I might be wrong with this, but it seems that the call uploader.start() is an asynchronous function call. So at the moment, the uploading will begin and the form will submit before the files are uploaded. The problem is that I don't have control over this function call.

I've recently read about the new release of jQuery 1.5 and the new Defe开发者_如何学Crred Object and it seems like this has the potential to help me solve this problem. Is there a way to wait for the asynchronous function call to finish its work and then continue the execution of the code after the call. So I'm looking for something like the following pseudocode...

var uploader = $('#plupload_container').pluploadQueue();

$('#submitButton').click(function() {

   // if there are files to be uploaded, do it
   if (uploader.files.length > 0) {

      // make the call and wait for the uploader to finish
      uploader.start();
      while ( the uploading is not done ) {
         wait for the uploader to finish
      }

      // continue with submission
   }
});

Is there a way to "wait" for uploader.start() to finish, essentially putting a pause on the click event handler, so that all the files can be uploaded first and then the rest of the click event handler can finish executing? I've tried the following but "done" is printed before the files are done uploading...

$.when(uploader.start()).then(function () {
   console.log("done")
});

Another useful piece of information... I can bind certain events to this uploader object instance, such as "UploadProgress" or "UploadComplete". Can I use the Deferred Object somehow to catch when the "UploadComplete" event fires, for example? Is there an AJAX-y way to do this?

Thanks.

Your problem is that although uploader.start does something asynchronous for the code to work, uploader.start has to return a jquery $.deferred object.

From the latest source on your uploader plugin:

/**
 * Starts uploading the queued files.
 *
 * @method start
 */
start : function() {
    if (this.state != plupload.STARTED) {
        this.state = plupload.STARTED;
        this.trigger("StateChanged");
        uploadNext.call(this);
    }
},

So it doesn't return a deferred object. Instead in the uploadNext function there is this line of code:

this.trigger("UploadComplete", files);

So we simply have to bind to your uploader,

uploader.bind("UploadComplete", function(files) {
    // your code
});

I've never used that plugin but this should work. Good luck.

If you must use deferreds then you can always something like this pseudocode:

var uploader = $('#plupload_container').pluploadQueue();
var def = $.Deferred();
uploader.bind("UploadComplete", function(files) {
    def.resolve(files);
});
$('#submitButton').click(function() {
   if (uploader.files.length > 0) {
      uploader.start();

      def.done(function(files) {
          def = $.Deferred(); // reset the deferred object.
          // rest of your click handler.
      });

   }
});

In the context of an imaginary upload session:

var files = ["file1.txt", "file2.txt", "file3.txt"];

These are the files we would like to upload. Let's assemble another array that has a deferred object for each upload:

var uploads = files.map(upload_one);

We call $.when() with this array of deferred objects and we also specify what to do after each upload, when anything fails and when everything is done completely:

$.when(uploads)
  .progress(function() {
    // report to user, step progress bar, etc
  })
  .fail(function() {
    // display error
  })
  .done(function() {
    // all uploads finished, do stuff
  });

This is the work function for each individual upload. It returns the deferred object and also calls the success or error functions in response to the individual upload:

function upload_one(file) {
  var deferred = new $.Deferred();
  // start upload

  // if finished:
  deferred.notify();
  deferred.resolve();

  // if failed:
  deferred.reject();

  return deferred;
}

Yes. The point of jquery's new deferred in the ajax api is to allow your code to wait for other asynchronous code.

If you have multiple asynchronous calls that depend on each other, deferred will allow you to perform some action once they all complete. That same idea applies here.