Question

关于jQuery延迟对象的Pluralsight教程有这个例子，我已经添加了一些console.log。它将三个html文件异步加载到三个div中，并且成功后会打印到屏幕上工作！ - 然而，console.log正在打印＆＃34;成功！＆＃34;在处理实际完成之前到控制台。同样的事情，如果我将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!');
    });
});

Answer 1

在loadSection功能中，更改

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

到

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

这应该会返回一个在.html(result)完成时解决的承诺，而不是$.get完成时的承诺

在延迟对象返回.done之前处理的console.log

1 个答案: