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

Posted 2023-02-22

【中文标题】我的 javascript 和移植的 elm 之间的 UI 滞后

【英文标题】：UI lag between my javascript and my ported elm

【发布时间】：2018-12-29 01:35:46

【问题描述】：

我有一个导航栏需要在滚动时更改颜色。这个功能最初是用 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);
    
  
;

这是 Elm 中的端口：

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

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

【问题讨论】：

能否添加有问题的代码

无法帮助提供所提供的信息。

我已经添加了一些代码，但请让我知道您还需要什么上下文。

【参考方案1】：

我发现最好在 Elm 和原版 UI 之间保持清晰的边界线。这样一来，Elm 渲染器以与 vanilla js 不同的方式运行时遇到问题要困难得多。

所以在你的例子中，我不会使用由基本 html/js 元素 和 Elm 元素混合而成的导航。相反，我会：

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

或者

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

【讨论】：

感谢@Finn，我使用了您的第一个选项，以便通过端口发送单击事件而不是滚动高度。这意味着登录按钮的构建与 html 中导航的其余部分一样，并使用 vanilla js 更改颜色，然后它只是按钮上的单击事件，它被发送到 elm，这将打开我的 elm 登录模式等流程的其余部分。