jquery $.when.apply().done not firing

Question

I have the following code which is working except for the $.when.apply($, promises).done() function (I have console logging showing when things are being processed).

I don't understand why the .done is not functioning.

What the code is basically doing is for each select in a filter container populate the select with values form an indexed db which is its own function and returns a promise. I can see everything working but the final .done is supposed to display items on the screen when everything has rendered, however the screen elements do not show and the page stays white.

grid.genPage = function() {
        console.time('genPage');
        $(grid.settings.filterContainer).hide();
        var gridParent = grid.e.parent('div');
        gridParent.hide();
        var promises = [];
        return $.Deferred(function(){
            var self = this;
            if (!grid.settings.startGenPage.call(this, grid)){
                self.reject();
            }
            grid.dtOptions.oColVis.aiExclude = [0];
            grid.displayFields = [];
            $.when(
                grid.buildFilter(),
                grid.buildViews(),
                grid.generateDataTable(grid.showColumns),
                grid.buildManageButtons()
            ).then(function(){
                console.log('start populating filters');
                $.each(grid.config.configs[grid.settings.defaultView], function(i, v) {
                    var p = $.Deferred(function(){
                        var self = this;
                        var field = Object.keys(v); //get field Name
                        if ($.inArray(i, grid.configIgnorArray) > -1) {
                            console.log('ignore resolve');
                            self.resolve();
                        }
                        var c = v[field];
                        if (c.filters.fieldType === 'select') {
                            var el = $('select[name="' + grid.e.prop('id') + 'Filter_' + field + '"]');
                            var os = c.options.objectStore;
                            var idx = c.options.idx;
                            var s = c.options.lookup;
                            $.when(grid.checkCache(el, c.options.objectStore, c.options.idx, c.options.lookup))
                            .then(function(){
                                console.log('select resolve');
                                self.resolve();
                            });
                        }else {
                            console.log('other resolve');
                            self.resolve();
                        }
                    });
                    promises.push(p);
                });
            });
        }).then(function(){
            $.when.apply($, promises).then(function(){
                console.log('end populating filters');
                console.log('genpage finish');
                grid.settings.completeGenPage.call(this, grid);
                $(grid.settings.filterContainer).show();
                gridParent.show();
                console.timeEnd('genPage');
                self.resolve();
            });
        }).promise();
    };

In the above code the console.log('end populating filters'); never appear in the console. I am sure it's an issue with something not resolving correctly but I cannot see where.

Thanks in advance

Answer 1

您需要解析第一个deferred对象，以触发then()成功回调：

self.resolve();