javascript - 我的 javascript 和移植的 elm 之间的 UI 滞后

Question

我有一个导航栏需要在滚动时改变颜色。此功能最初是用 js 构建的，但现在它有一个内置于 elm 中的“登录”按钮以执行其他功能。

我用一个port和subscription用原来的js改变了elm登录按钮的颜色。 颜色更改有效，但有时登录按钮和导航栏的其余部分更改颜色之间存在滞后，因此按钮会暂时消失。但有时颜色更改是无缝的。

我尝试切换 js 函数和订阅的发送顺序，看看是否会有所不同，但没有。我知道 elm 是异步的这一事实会影响它/js 的显示顺序，但我不确定在这种情况下如何让它顺利进行。

有谁知道如何消除这种延迟？

这是 js 端口代码:

window.onscroll = function() {
  if (this.scrollY <= 20) {
    if (!isTop) {
      isTop = true;
      setTransparentNav(); // this is a simple CSS class change fn
      app.ports.colorChanges.send(isTop); // this is the UI which is lagging
    }
  } else {
    if (isTop) {
      isTop = false;
      setBlackNav();
      app.ports.colorChanges.send(isTop);
    }
  }
};

这是 Elm 中的端口:

port colorChanges : (Bool -> msg) -> Sub msg

它发送的消息是一个简单的 Bool，当它为 True 时指示使用哪些类。

Answer 1

我发现最好在 Elm 和 vanilla UI 之间保持清晰的界限。这样就更难遇到 Elm 渲染器以不同于 vanilla js 的方式运行的问题。

因此，在您的示例中，我不会使用由基本 html/js 元素和 Elm 元素混合组成的导航。相反，我会:

• 使用标准的 html 和 js 创建登录按钮，并将端口附加到点击处理程序以打开任何 Elm 登录模式(或从 Elm 到 JS 的端口用于按钮文本更改等)。

或者

• 在 Elm 中重建导航的其余部分，以便以相同的方式处理所有渲染。