UI 在我的 javascript 和移植的榆树之间滞后

Question

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

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

我尝试切换 js 函数和订阅的发送顺序，看看是否会有所不同，但没有。我知道 elm 是异步的这一事实会影响 it/the 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

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

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

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

或

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

UI 在我的 javascript 和移植的榆树之间滞后

UI lag between my javascript and my ported elm

javascript

delay

elm

lag

subscriptions