javascript - jQuery 延迟 promise 执行不按顺序执行？

Question

编辑:重要提示这是使用 jQuery 1.7.2，并且不能从此版本更改

我对 promise 很陌生，并试图理解它们。我试图按顺序执行一系列函数，等待它们完成后再创建一些 subview (这在 Backbone.js 中)。这是我的代码:

initialize: function () {
    console.log('AppView::initialized!');
    var _this = this;

    $.when( _this.processCookies() )
        .then( _this.loadAdScripts() )
        .then( _this.createChildViews() );
},

processCookies: function () {
    var def = $.Deferred();
    console.log('(1) PROCESS COOKIES');
    return def.resolve();
},


/**
 * Instantiates new instances of the child views.
 */
createChildViews: function () {
    var _this = this;
    console.log('(4) CREATING CHILD VIEWS');
},

loadAdScripts: function () {

    var _this = this,
        def = $.Deferred();

    $.when(
        _this.insertScript({
            name: 'example1',
            async: false,
            src: '//www.example.com/script1.js',
        }),
        _this.insertScript({
            is_mobile: is_mobile,
            name: 'example2',
            async: true,
            src: '//example.com/script2.js'
        })
    )
    .done(function () {
        console.log('(3) ALL SCRIPTS LOADED');
        def.resolve();
    });
},

insertScript: function (script) {
    var def = $.Deferred(),
        protocol = (document.location.protocol === 'https:' ? 'https:' : 'http:');

    // dont script 2 on mobile.
    if (script.name === 'example2' && script.is_mobile) {
        console.log('skipping script');
        return def.resolve();
    }

    var promise = $.ajax({
        dataType: 'script',
        cache: false,
        async: script.async,
        url: protocol + script.src,
    });

    promise.done( function () {
        console.log('(2) SINGLE SCRIPT LOADED');
        return def.resolve();
    });


},

因此，这里所需的流程是:

1. 当processCookies()函数完成时，
2. 执行loadAdScripts函数 2a. insertScript() 触发，脚本 1 加载 2b. insertScript() 触发，脚本 2 加载
3. 当两个脚本完成后，执行 createChildViews 函数。

所以，观察代码中的 console.log() 占位符，我期望在我的控制台中看到:

'(1) PROCESS COOKIES'
'(2) SINGLE SCRIPT LOADED'
'(2) SINGLE SCRIPT LOADED'
'(3) ALL SCRIPTS LOADED'
'(4) CREATING CHILD VIEWS'

但是我实际看到的是:

'(1) PROCESS COOKIES'
'(3) ALL SCRIPTS LAODED'
'(4) CREATING CHILD VIEWS'
'(2) SINGLE SCRIPT LOADED'
'(2) SINGLE SCRIPT LOADED'

我的 promise 有什么问题，为什么它们没有按预期顺序执行？

Answer 1

$.when( _this.processCookies() )
        .then( _this.loadAdScripts() )
        .then( _this.createChildViews() );

似乎立即调用 loadScripts() 、 createChildViews() ，而是尝试在 .then(_this.loadAdScripts) 处引用函数名称回调。

return def.resolve() 返回 jQuery.Deferred() 对象，而不是 jQuery Promise 对象；尝试在 .resolve() 之后添加 .promise() 以返回 jQuery Promise 对象。

jQuery.ajax() 返回 jQuery Promise 对象；不需要创建新的 jQuery $.Deferred() 对象，可以返回 $.ajax()

initialize: function () {
    console.log('AppView::initialized!');
    var _this = this;

    $.when( _this.processCookies() )
        // reference function name, not invoked
        .then( _this.loadAdScripts )
        .then( _this.createChildViews );
},

processCookies: function () {
    // no asynchronous operations appear here, 
    // no need to include `$.Deferred()` or `.promise()` object
    // var def = $.Deferred();
    console.log('(1) PROCESS COOKIES');
    // return jQuery promise object, not deferred object
    // return def.resolve().promise();
},


/**
 * Instantiates new instances of the child views.
 */
createChildViews: function () {
    var _this = this;
    console.log('(4) CREATING CHILD VIEWS');
},

loadAdScripts: function () {

    //var _this = this,
    //    def = $.Deferred();

    return $.when(
        _this.insertScript({
            name: 'example1',
            async: false,
            src: '//www.example.com/script1.js',
        }),
        _this.insertScript({
            is_mobile: is_mobile,
            name: 'example2',
            async: true,
            src: '//example.com/script2.js'
        })
    )
    .done(function () {
        console.log('(3) ALL SCRIPTS LOADED');
        // def.resolve();
    });
},

insertScript: function (script) {
    // var def = $.Deferred(),
        protocol = (document.location.protocol === 'https:' ? 'https:' : 'http:');

    // dont script 2 on mobile.
    // if (script.name === 'example2' && script.is_mobile) {
    //    console.log('skipping script');
    //    return def.resolve().promise();
    // }

    var promise = script.name === 'example2' && script.is_mobile 
                  ? $.when() 
                  : $.ajax({
                      dataType: 'script',
                      cache: false,
                      async: script.async,
                      url: protocol + script.src,
                    });

    promise.done( function () {
        console.log('(2) SINGLE SCRIPT LOADED');
        // def.resolve();
    });    
},

<小时/>

EDIT: IMPORTANT NOTE this is using jQuery 1.7.2, and no it cannot be changed from this version

编辑、更新

在不修改源代码的情况下，使用 jQuery 版本 1.7.2 可能无法实现预期的顺序。

在更新 deferred.then 后，使用 jQuery 版本 1.8+ 时似乎返回预期顺序;请参阅http://blog.jquery.com/2012/08/09/jquery-1-8-released/ , http://bugs.jquery.com/ticket/11010

1.8.0

var dfd = {
    initialize: function () {
        console.log('AppView::initialized!');
        _this = dfd;

        $.when(_this.processCookies())
        // reference function name, not invoked
        .then(_this.loadAdScripts)
        .then(_this.createChildViews);
    },

    processCookies: function () {
        // no asynchronous operations appear here, 
        // no need to include `$.Deferred()` or `.promise()` object
        var def = $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(1) PROCESS COOKIES')
            }, Math.floor(Math.random() * 1000));
        }).promise();
        def.then(function (msg) {
            console.log(msg);
        });
        return def.promise()
    },


    /**
     * Instantiates new instances of the child views.
     */
    createChildViews: function () {
        _this = dfd;
        console.log('(4) CREATING CHILD VIEWS');
    },

    loadAdScripts: function () {
        _this = dfd;
        return $.when.apply(_this, [_this.insertScript({
            name: 'example1',
            async: false,
            src: '//www.example.com/script1.js',
        }),
        _this.insertScript({
            is_mobile: true,
            name: 'example2',
            async: true,
            src: '//example.com/script2.js'
        })]).then(function () {
            console.log('(3) ALL SCRIPTS LOADED');
        })
    },

    insertScript: function (script) {
        // var def = $.Deferred(),
        protocol = (document.location.protocol === 'https:' ? 'https:' : 'http:');

        // dont script 2 on mobile.
        // if (script.name === 'example2' && script.is_mobile) {
        //    console.log('skipping script');
        //    return def.resolve();
        // }

        var promise = $.when( script.name === 'example2' && script.is_mobile ? $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(2) skipping script', protocol + script.src)
            }, Math.floor(Math.random() * 1000))
        }).promise() : $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(2) SINGLE SCRIPT LOADED', protocol + script.src)
            }, Math.floor(Math.random() * 1000))
        }).promise())
        
        return promise.then(function(msg) {
          console.log(msg)
        });
    }
};

dfd.initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

1.72

var dfd = {
    initialize: function () {
        console.log('AppView::initialized!');
        _this = dfd;

        $.when(_this.processCookies())
        // reference function name, not invoked
        .then(_this.loadAdScripts)
        .then(_this.createChildViews);
    },

    processCookies: function () {
        // no asynchronous operations appear here, 
        // no need to include `$.Deferred()` or `.promise()` object
        var def = $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(1) PROCESS COOKIES')
            }, Math.floor(Math.random() * 1000));
        }).promise();
        def.then(function (msg) {
            console.log(msg);
        });
        return def.promise()
    },


    /**
     * Instantiates new instances of the child views.
     */
    createChildViews: function () {
        _this = dfd;
        console.log('(4) CREATING CHILD VIEWS');
    },

    loadAdScripts: function () {
        _this = dfd;
        return $.when.apply(_this, [_this.insertScript({
            name: 'example1',
            async: false,
            src: '//www.example.com/script1.js',
        }),
        _this.insertScript({
            is_mobile: true,
            name: 'example2',
            async: true,
            src: '//example.com/script2.js'
        })]).then(function () {
            console.log('(3) ALL SCRIPTS LOADED');
        })
    },

    insertScript: function (script) {
        // var def = $.Deferred(),
        protocol = (document.location.protocol === 'https:' ? 'https:' : 'http:');

        // dont script 2 on mobile.
        // if (script.name === 'example2' && script.is_mobile) {
        //    console.log('skipping script');
        //    return def.resolve();
        // }

        var promise = $.when( script.name === 'example2' && script.is_mobile ? $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(2) skipping script', protocol + script.src)
            }, Math.floor(Math.random() * 1000))
        }).promise() : $.Deferred(function (d) {
            setTimeout(function () {
                d.resolve('(2) SINGLE SCRIPT LOADED', protocol + script.src)
            }, Math.floor(Math.random() * 1000))
        }).promise())
        
        return promise.then(function(msg) {
          console.log(msg)
        });
    }
};

dfd.initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>