jQuery .get奇怪

Question

Here is a magic code:

function() {
        var result='';
        for (var key in TRAINER_STEPS){
            if (TRAINER_STEPS.hasOwnProperty(key)) {
                $.get('steps/trainer.step.'+key+'.html')
                    .done(function(data) {
                        console.log(data); // HERE DATA IS VALID HTML DATA
                        result += '<div '+(key == TRAINER_DEFAULT_STEP ? 'class="hiddenStep"' : 'class="currentStep"')+' data-step="'+key+'">'+data+'</div>
'; // AND HERE NOTHING HAPPEND
                    })
                    .fail(function(jqxhr, settings, exception) {
                        console.log("[el5s] Load step steps/trainer.step."+key+".html failed. Error: "+exception);
                });

            }

        }
        console.log(result); // EMPTY HERE
        return result;
    }

$.get works good, and data is received properly, but my function returns totaly empty result. See my coments. What's wrong with it?

Answer 1

The design of your program needs to be re-thought. In general, what you need to do is split the function into three different functions: The part that happens before the AJAX call, the part that happens if the AJAX call is successful, and the the part that happens if the AJAX call is not successful.

Instead of this pseudocode process:

function doSomething() {
    // code to do whatever
    var data = getDataFromWebService();
    // code to work with the data
}

use this one:

function doSomething() {
    // code to do whatever

    $.get('steps/trainer.step.'+key+'.html')
        .done(onSuccess)
        .fail(onFailure);
}    

function onSuccess() {
    // code to work with the data
}

function onFailure() {
    // code to respond to a web service that is down whatever
}