你如何在javascript中异步声明一个变量？

Question

所以我在 Web 扩展中加载了一堆非常大的 JavaScript 列表。不幸的是，它们太大以至于它们减慢了页面加载速度，每个列表大约需要 5 毫秒。虽然很小，但我想摆脱加载时间并异步加载变量以保证以后使用它们。

Answer 1

原来，Promises 有一个方法可以从任何对象创建 Promise，Promise.resolve()。例如，对于我的非常大的列表，假设我有三个函数，分别称为 createList1、createList2 和 createList3，它们创建并返回一个非常大的列表。然后，我可以异步创建这些列表，聚合它们，并在调用方法并且通过以下方式解决 Promise 时使用它们：

// use a closure for good practice.
let closure = (function() {
    // create the promises when the script is loaded
    var x = Promise.resolve(createList1());
    var y = Promise.resolve(createList2());
    var z = Promise.resolve(createList3());
    // aggregate all promises into one promise
    return Promise.all([x,y,z]);
})();

function doSomething(listOfLargeLists) {
    // given the list very large lists, do something with each of them
    // do stuff here, e.g. var actualList1 = listOfLargeLists[0];
}

closure.then((listOfLargeLists) => {
    doSomething(listOfLargeLists);
});

如果你只想异步声明一个变量，你只需要在 promise 中创建它，然后每当你想使用它时，使用 then:

var x = Promise.resolve(createList1());

function doSomething(bigList) {
    // do something with the list
}

function doSomethingDifferent(bigList) {
    // do something different with the list
}

var y = x.then((bigList) => {
    doSomething(bigList);
});

// Async with y
var z = x.then((bigList) => {
    doSomethingDifferent(bigList);
});

// Or Wait for y first and use its return value
var yUpdate = y.then((bigList) => {
    doSomethingDifferent(bigList);
});