时间戳

首页 > 解决方案 > ES6：过滤数组以不冻结 UI

javascript - ES6：过滤数组以不冻结 UI

问题描述

我正在尝试过滤一个巨大的数组。不幸的是，数组太大以至于 UI 冻结。这就是为什么我试图以块的形式执行过滤，中间有一个超时，以便 UI 可以加载。

出于演示目的，我采用“巨大”数组[1,2,3,4,5]并返回可被二整除的元素。

我已经尝试过了，但它不起作用：

[1,2,3,4,5].filter(async (x) => {
    // wait 1 sec after each element to filter
    await new Promise(resolve => setTimeout(resolve, 1000));
    return x % 2 === 0;
});

任何想法如何过滤一个大数组以使 UI 不会冻结？

标签： javascriptarraysfilterecmascript-6

解决方案

您可以以异步方式用过滤后的元素填充空数组，需要注意的是顺序可能与原始数组不同：

var ret = []
var promiseArray = [1,2,3,4,5].map( async x => {
    await new Promise(resolve => {setTimeout(resolve, 1000)})
    if (x % 2 === 0) {
        ret.push(x)
    }
})
Promise.all(promiseArray).then(()=> {console.log(ret)})

推荐阅读