当面板大小改变时如何触发功能/运行代码？

Question

我希望我的布局根据面板的大小而变化（根据内部文本的数量而变化）。 如果我的面板改变高度，如何触发函数？

上下文：面板中的文本在 onAfterRendering 函数中发生变化，具体取决于 api 提供的内容。然而，根据大小，另一个元素必须改变。但由于它的异步和 api 必须在 onAfterRendering 函数中加载，因此需要在面板更改后运行。这也许可以通过 Promise 实现，但是如果在调整窗口大小时也运行它（这也会调整面板大小），那就更好了。

我不确定 EventProvider 是否可以在这里提供帮助，但我不知道如何使用它或什么 sEventId 是有效的。

var panelX = this.getView().byId('panelId'); panelX.addEventListener('resize', this.setNHeight();

我真的很感激任何帮助！

Answer 1

我找到了一个有效的解决方案：

我首先实现了一个 Promise，以便将文本添加到 Promise 中，然后更新一次其他元素。

function titlePromise() {
return new Promise(function (resolve) {
setTimeout(function () {
    resolve(true);
}, 0);
}).then(that.setTitle(lunchView, mealTitle, mealSubtitle)); //my function that adds the text to the panel

}

titlePromise().then(function () {
    that.setNHeight(); //the function I wanted to call after that
});

然后，每次窗口大小调整时，我都使用 jQuery 再次运行该函数。 将其附加到我的面板上不起作用，但由于面板是用 vw 定义的，所以没问题。

$(window).on('resize', function () {
    lunchV.setNutritionHeight(lunchView);
});

对于任何尝试类似操作的人来说，还有一件值得注意的事情：我只能在 jQuery 提示符中使用类，而不能使用 ID。