jquery - jQuery .get 工作很奇怪

Question

这是一个神奇的代码：

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>\n'; // 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 效果很好，并且数据被正确接收，但我的函数返回完全空的结果。看我的评论。它出什么问题了？

Answer 1

您的程序的设计需要重新考虑。一般来说，您需要做的是将函数拆分为三个不同的函数：AJAX 调用之前发生的部分、AJAX 调用成功时发生的部分以及 AJAX 调用不成功时发生的部分.

而不是这个伪代码过程：

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

使用这个：

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
}