elm - 如何去抖榆树信号？

Question

我正在使用 start-app 来构建我的应用程序。 Html.Events 支持使用自定义 Signal.message 创建自定义事件。但是如何发送该消息是在 Html 库后面抽象出来的。还有一个称为实现去抖动的库(http://package.elm-lang.org/packages/Apanatshka/elm-signal-extra/5.7.0/Signal-Time#settledAfter)。

搜索栏.elm:

module PhotosApp.SearchBar (view) where

import Html exposing (input, div, button, text, Html)
import Html.Events exposing (on, onClick, targetValue)
import Html.Attributes exposing (value, type')

import Effects exposing (Effects, Never)

import PhotosApp.Actions as Actions

onTextChange : Signal.Address a -> (String -> a) -> Html.Attribute
onTextChange address contentToValue =
    on "input" targetValue (\str -> Signal.message address (contentToValue str))

view : Signal.Address Actions.Action -> String -> Html
view address model =
    div []
        [ input  [ type' "text", value model, onTextChange address Actions.Search] []
        , button [ onClick address Actions.Clear ] [text "Clear"]
        ]

Answer 1

在绑定(bind)到@Apanatshka 的 settledAfter 函数之前，您可以通过代理邮箱设置 HTML 属性的去抖动。

(请注意，由于您使用的是 StartApp，我们无法直接访问主地址，因此我不得不通过忽略地址 来妥协其中的一些功能> 传递到 view。您可以通过不使用 StartApp 获得更通用的东西，但这应该可以帮助您入门)

由于事件属性不能直接创建任务，所以我们不得不使用中间代理邮箱。我们可以这样设置:

debounceProxy : Signal.Mailbox Action
debounceProxy =
  Signal.mailbox NoOp

请注意，上述函数需要一个 NoOp 操作，这在 Elm 架构中很常见，这意味着 update 函数不会对模型进行任何更改。

现在我们需要设置另一个监听代理邮箱的 Signal，然后通过 settledAfter 函数传递信号。我们可以这样定义这个信号:

debounce : Signal Action
debounce =
  settledAfter (500 * Time.millisecond) debounceProxy.signal

我们现在可以更改 onTextChange 函数以指向代理邮箱。请注意，我已经删除了第一个 Address 参数，因为它被忽略了(请参阅我之前关于符合 StartApp 的评论):

onTextChange : (String -> Action) -> Html.Attribute
onTextChange contentToValue =
    on "input" targetValue (\str -> Signal.message debounceProxy.address (contentToValue str))

最后，您必须将 debounce 信号绑定(bind)到 StartApp 的 inputs 参数中，这意味着您对 start 的调用将如下所示:

app = StartApp.start
  { init = init
  , update = update
  , view = view
  , inputs = [ debounce ]
  }

我已将完整的工作示例粘贴到 gist here。