如何对异步结果对象执行对象操作？

Question

我想知道如何从一个文件异步操作另一个文件中的 JS 对象。我对异步代码原理并没有太多经验。

情况：

我有一个文件，app.js我在其中根据我的 HTML 动态创建“应用程序面板”。

$("div.app-panel[data-panel]").each(function() {

        // create panel objects for all html divs with class app-panel

        var panel = {};

        panel.div = $(this);

        panel.name = $(this).attr("data-panel");

        panel.isActive = ($(this).attr("data-active-panel") == "true" ? true : false);

        panel.onActive = () => {

            // default functionality to execute when activating an app panel

            panel.isActive = true;

            $(panel.div).attr("data-active-panel", true);

        };

        panel.onInactive = () => {

            // default functionality to execute when deactivating an app panel

            panel.isActive = false;

            $(panel.div).attr("data-active-panel", false);

        };

        app.panels.push(panel);

    });

现在我希望能够覆盖我的另一个文件中的 onActive 方法，main.js但是我如何知道这段代码是否已完成运行？我无法在 app.panels 上应用.filter()或应用.find()，它将返回未定义。我可以console.log(app.panels)，它会将数组返回到我的控制台......但我不能这样做：

panel = app.panels[0]

这会给我未定义的。

我试图在 object 中创建一个函数app，它接受一个将使用 app.panels 作为参数的回调函数。然而，这给了我相同的结果......

然后我尝试用这种方式解决它：

app.getPanels = async () => {

    var promise = new Promise(function(resolve, reject) {

        resolve(app.panels);

    });

    return promise;

};

var getPanels = async (callBack) => {

    const appPanels = await Promise.all(app.getPanels());

    console.log(appPanels);

    callBack(appPanels);

}

这会引发错误“TypeError：对象不可迭代”。

无论如何，我认为我的代码很清楚我根本不熟悉承诺，我做错了什么？

Answer 1

承诺者不是这里的解决方案。这一切都与协调从不同文件加载的代码有关。一个典型的策略是：除“main.js”之外的所有 .js 文件都包含类/函数，但不执行任何内容。“main.js”通过创建类实例和调用函数/方法来协调一切。最后加载“main.js”。