Javascript 在延迟对象返回到之前已处理console.log。完成

关于jQuery延迟对象的Pluralsight教程中有一个示例，我在其中添加了一些

console.log

s。它将三个html文件异步加载到三个div中，成功后，它将打印到屏幕“工作！”--但是，

console.log

正在处理实际完成之前向控制台打印“success！”。如果我将

console.log

放在代码的

when

部分中，它会在内容实际加载到屏幕之前打印出加载完成的内容

那么，为什么DOM上的处理按预期进行（成功时），但

console.log

消息的打印时间早于成功时

var loadSection = function (options) {
    if (typeof options !== 'object')
    options = {
    };
    options.selector = options.selector || '';
    options.url = options.url || '';
    return $.get(options.url, function (result) {
        $(options.selector).html(result);
        console.log(options.url)
    }, 'html')
}
$('#Load').on('click', function () {
    $.when(loadSection({
        url: 'Content1.html',
        selector: '#Section1'
    }), loadSection({
        url: 'Content2.html',
        selector: '#Section2'
    }), loadSection({
        url: 'Content3.html',
        selector: '#Section3'
    })
    ).promise()
     .done(function (result) {
        $('#Messages').append('Worked!<br/>')
        console.log('success!');
    });
});

var loadSection=函数（选项）{
如果（选项类型！==“对象”）
选项={
};
options.selector=options.selector | |“”；
options.url=options.url | |“”；
返回$.get（options.url，函数（result）{
$（options.selector）.html（结果）；
console.log（options.url）
}，'html'）
}
$（'#Load'）。在（'click'，函数（）{
$.when（加载部分）({
url:'Content1.html'，
选择器：“#第1节”
})，载重区段({
url:'Content2.html'，
选择器：“#第2节”
})，载重区段({
url:'Content3.html'，
选择器：“#第3节”
})
).承诺
.完成（功能（结果）{
$（“#消息”）.append（'Worked！
）
console.log（'success！'）；
});
});

在您的

加载部分

功能中，更改

return $.get(options.url, function (result) {
    $(options.selector).html(result);
    console.log(options.url);
}, 'html')

到

---

这应该返回一个承诺，该承诺在

.html（result）

完成时解析，而不是在

$.get

完成时解析。

为什么要对

$.when（）的结果（延迟实例）调用
.promise（）
？您可以直接在该返回值上调用
.done（）
。这是因为DOM上的操作比您应该使用的JavaScript脚本慢得多。然后
插入
.promise（）.done（）
本教程开始时我们使用
。然后
，但随后您将其更改为
.promise（）.done（）
为了防止延迟对象的状态被意外更改，我建议通过resolve/reject。我还没走那么远。
return $.get(options.url, 'html')
.then(function (result) {
    console.log(options.url);
    return $(options.selector).html(result).promise();
});