Unwinding promises and their handlers

问题

I want to launch a sequence of tasks and I need they execute in order. When a button (#submitButton) is clicked on the entire process is launched (startAll function), so I implement an architecture like this:

function startAll()
{
   var startDeferred, highPriorityTasksDeferred, lowPriorityTasksDeferred, finalizeDeferred;

   startDeferred = $.Deferred;

   **highPriorityTasksDeferred= startDeferred.then(initialize).done(initiate); <-- ERROR HERE**

   lowPriorityTasksDeferred= highPriorityTasksDeferred.then(function () {
            console.log('Processing HIGH priority tasks...');
            return highPriorityTasks;
   })
   .done(function () {
            console.log('HIGH priority taks processed.');
   });

   finalizeDeferred= lowPriorityTasksDeferred.then(function () {
            console.log('Processing LOW priority tasks...');
            return lowPriorityTasks;
   })
   .done(function () {
            console.log('LOW priority taks processed.');
   });

   finalizeDeferred.then(finalize).done(terminate);

   // Starts all
   startDeferred.resolve();
}

function initialize() {
    // Things to be initialized just before starting process
    console.log('</br>Initiating process...');

    // Stuff

    return;
}

function initiate() {
    // Once initialized, do simple things
    setButtonDisabled(true);

    console.log('Process started at ' + $.now()+ '<br/>');

    return;
}

function finalize() {
    // Things to be done just before ending process
    // Free resources, etc.
    console.log('<br/>Finishing process...');

    // Stuff

    return;
}

function terminate() {
    // Things to be done once finished is done.
    // Simple things such as those related to UI.
    setButtonDisabled(false);

    console.log('<br/>Process terminated at ' + $.now());

    return;
}

function setButtonDisabled(status) {
    $('#submitButton').prop("disabled", status);
}

high/lowPriorityTasks methods have a structure like this:

function high/lowPriorityTasks() {

    getTasks().then(function (response) {

       // stuff

    }).then(function () {

       // stuff 

    }).fail(function (err) {

       // stuff
    });
}

Console Output for this should be:

Initiating process...
Process started at XXX

Processing HIGH priority tasks...
HIGH priority taks processed.

Processing LOW priority tasks...
LOW priority taks processed.

Finishing process...
Process terminated at XXX

Important notes:

Functions initialize, initiate, finalize and terminate, their last command is return; but I am not sure if it is correct.
I am using jQuery 1.10.2 and asp.net MVC 4

Observed issues:

When executing it, a runtime error is raised saying that the object does not accept the property or method 'then' at line bolded:

highPriorityTasksDeferred= startDeferred.then(initialize).done(initiate);

First attempt:

As kenneth has said, brackets after $.Deferred were missed so by adding them $.Deferred() the process is executed but some issues appears: It seems like, the high/lowPriorityTasks functions are not executed as in the console is displayed:

Initiating process...
Process started at XXX


Finishing process...

Process terminated at XXX

Any ideas? Also i would like to know if the return; in the functions initialize, initiate, finalize and terminate is the best way to do it or there is another best option.

Second attempt:

Some brackets were missed for highPriorityTasks and lowPriorityTasks when called so now they are executed correctly but the problem is that they are not done in order....

回答1:

You're missing brackets after the $.Deferred. At the moment it's returning the deferred-function not a Deferred-object.

Change it to the following and it should work:

startDeferred = $.Deferred();

来源：https://stackoverflow.com/questions/18982225/unwinding-promises-and-their-handlers

标签

jquery

asp.net-mvc-4

scripting