在 Elm 中更新视图后调用端口

Question

有没有一种简单的方法可以在视图更新后执行Cmd？特别是，我试图在按下特定键（如回车键）时将光标重新定位在 textarea 中。在我的update 函数中，我有：

case keyboardEvent.key of
    "Enter" ->
        ( modelAfterEnterPressed model keyboardEvent.selectionStart, setCursor model.cursor )
    "Tab" ->
        ....

我的setCursor端口被调用，相应的JavaScript代码正确调用了textarea的setSelectionRange函数。 然后 Elm 调用我的view 函数来更新textarea 的内容。不幸的是，这会清除我的光标位置。

我需要更新textarea 的内容之前在我的JavaScript 端口中调用textarea.setSelectionRange()。有什么方法可以在不诉诸 setTimeout 的情况下做到这一点，这可能并不总是有效，并且会在超时内导致闪烁？

Answer 1

执行此操作的标准方法是触发在下一个刻度返回的命令 - 例如Date.now - 然后从该消息中触发端口命令。这保证了视图函数将运行并且您的文本区域存在。

根据我的经验，另一种似乎也有效的替代方法是用 requestAnimationFrame 替换 setTimeout（具有任意间隔）：

elm.ports.selectText.subscribe( () => {
  requestAnimationFrame( () => {
    var textarea = document.querySelector(...);
    textarea.setSelectionRange();
  });
});

这将在 view 也被渲染后触发。