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

Question

我有一个导航栏,需要在滚动时更改颜色.此功能最初是使用js构建的,但现在它有一个"登录"按钮,它是用elm构建的,用于执行其他功能.

我使用端口和订阅来使用原始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);
    }
  }
};

这是榆树的港口:

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中重建导航的其余部分,以便以相同的方式处理所有渲染.