Question

我正在修改一个插件以向其添加新功能。该插件使用Promise.all，如下所示：

Promise.all([
                coreUtils.promisify(_(this).fetch, this.buildRequest()),
                fetchDataIds.call(this)
            ])
            .then(this.onFetchSuccess.bind(this))
            .catch(this.onFetchError.bind(this));

这样可以正常工作而无需添加对新功能的支持。

好的，没关系。但是当我添加多选框作为新功能的一部分时，我每次在选择框中选择项目时都要调用Promise.all。这有时很好，有时也不行。当我快速选择/取消选择选择框中的项目时，UI会冻结。如果我的速度很慢（正常速度），它可以正常工作。

更新

异步方法是(_(this).fetch)：

fetch: function (request) {
                    return usersService.get(request);
                },



function mockGet(request) {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                var start = request.offset,
                    end = start !== undefined ? request.offset + request.limit : undefined,
                    sortDirection = request.sortDir === 'asc' ? 1 : -1,
                    responseData = data;

                // logic to filter and sort data goes here

                var res = {
                    items: start !== undefined ? responseData.slice(start, end) : responseData,
                    total: responseData.length
                };
                resolve(coreUtils.clone(res, true));
            }, 500);
        });
    }

buildRequest: function () {
            return {
                sortAttr: this.getSortAttribute(),
                sortDir: this.getSortDirection(),
                limit: this.getPageLimit(),
                offset: this.getPageOffset(),
                pageIndex: this.getPageIndex(),
                filters: this.getFilters()
            };
        },

 function fetchDataIds() {
        /* jshint validthis:true */
        var dataIds = this.getDataInfoById();

        if (dataIds !== undefined) {
            return Promise.resolve(dataIds);
        }

        return coreUtils.promisify(_(this).getAllIds)
            .then(function (ids) {
                // initialize the selection to none selected
                var itemSelectedByIdMap = {};
                ids.forEach(function (idValue) {
                    itemSelectedByIdMap[idValue] = {selected: false};
                });

                setDataInfoById.call(this, itemSelectedByIdMap);
                setSelectionLevel.call(this, SelectionLevels.NONE, true);

                return itemSelectedByIdMap;
            }.bind(this));
    }

这是所有代码。过滤和排序的逻辑没有任何Promise。

可能的解决方案 我从mockGet函数中删除了setTimeout，它可以在不冻结UI的情况下工作。目前一切都在客户端完成。因此，一旦我调用REST API，我不确定是否会获得相同的性能。

如何使用Promise.all解决此问题的冻结问题？有任何解决方法或有其他选择吗？

javascript - Promise.all冻结UI

0 个答案: