Elm Gizra/elm-debouncer with text input
Demo
Let us get right to the demo with the code below. Here you can see the text in put, and then after the Debouncer is "settled" it appends it to the message list.
Be aware, if you were to naively use the onInput
event for the debouncer directly on the element (like I did) you would be rate limiting the input itself and would find yourself unable to type faster than a single character per second.
Elm is cool. This is Gizra/elm-debouncer example modified with a text box delayed for one second.
It was not immediately obvious that update
could be called recursively. And I had some confusion on how to get a Msg
without a Cmd Msg
but most posts just said, "you don't want to do it that way".
Snippet
Full code: /elm-debouncer-text/Messages.elm
update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of MsgQuietForOneSecond subMsg -> Debouncer.update update updateDebouncer subMsg model DoThingNow str -> update (MsgQuietForOneSecond (provideInput DoThingLater) ) { model | draft = str } DoThingLater -> ( { model | messages = model.messages ++ [ model.draft ] , draft = "" } , Cmd.none ) view : Model -> Html Msg view model = div [ style "margin" "1em" ] [ Html.textarea [ Html.Attributes.value model.draft , onInput DoThingNow ] [] , p [] [ text " I'll add a message below once you stop typing for one second." ] , model.messages |> List.map (\message -> p [] [ text message ]) |> div [] ]