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);
    });

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

panel = app.panels[0]

这会让我不确定。

我试图在对象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：对象不可迭代”。

无论如何，我认为我的代码很清楚地表明我根本不熟悉promise，我在做什么错了？

Answer 1

承诺者不是这里的解决方案。这与协调从不同文件加载的代码有关。

典型的策略是：

除“ main.js”之外的所有.js文件都包含类/函数，但不执行任何操作。
“ main.js”通过创建类实例并调用函数/方法来协调所有事情。
“ main.js”最后加载。

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

1 个答案: