以正确的顺序执行承诺的循环

Question

I am writing a program which takes a sentence and replaces abbreviations with their full terms from a database (eg, "hi and gm" --> "hello and good morning" if abbreviations stored in database are, "hi" --> "hello" and "gm" --> "good morning"). The original sentence was stored in $('#translation').text(), and should be replaced accordingly.

So I found out how to make getFullSentence() wait until the for loop has completed the helper function, getFullWord(), for each word by using promises.

The problem is that getFullWord() is not being executed in sequential order, eg if I log "i" I get 0, 3, 1, 2 instead of 0, 1, 2, 3. How can I fix this problem? Thank you in advance!

function getFullSentence(uid, sentence) {
    var promises = [];

    var words = sentence.split(" ");
    $.each(words, function(i, word) {
        promises.push(getFullWord(uid, word, i));
    });

    $.when.apply(null, promises).done(function() { 
        play($('#translation').text());
    });
}

function getFullWord(uid, word, i) {
    var defer = $.Deferred();

    $.get("/checkAbbreviation/" + uid + "/" + word, function(data) {
        word = data.full;

        var currSentence = $('#translation').text() + " ";
        var newSentence = currSentence + word.toUpperCase();
        $('#translation').text(newSentence);    
    }).done(function() {
        defer.resolve();
    });

    return defer.promise();
}

Answer 1

There are a lot of things wrong here. First off, you don't need to run your operations in sequence (like you seem to think you do). You can run them in parallel and let $.when() collect the results for you in order. This just requires that you do all your processing at the end after you've collected all the results and $.when() will collect them in order for you.

Second, you are using a deferred anti-pattern where you create a promise around something that already returns a promise. You can directly return the promise from $.ajax() rather than creating a new one.

Some other improvements:

• You can use .map() to replace .each() and .push() .
• You can use .join() to join all your strings.
• If you return a value from the .then() handler on $.ajax() , it vastly simplifies processing the results in $.when() . In this case, you want to return data.full.toUpperCase() anyway.
• Use only .then() , not .done() .
• With $.ajax() don't mix callbacks and promises. Use one or the other (promises are likely best).

Here's a way to run your operations in parallel and collect the results in order:

function getFullSentence(uid, sentence) {
    var promises = sentence.split(" ").map(function(word, i) {
        return getFullWord(uid, word, i);
    });

    $.when.apply($, promises).then(function() { 
        // get all results into an array
        var results = Array.prototype.slice.call(arguments);
        var text = results.join(" ");
        $('#translation').text(text);
        play(text);
    });
}

function getFullWord(uid, word, i) {
    return $.get("/checkAbbreviation/" + uid + "/" + word).then(function(data) {
        // make resolved value be data.full
        return data.full.toUpperCase();
    });
}