All Projects → jinjor → elm-debounce

jinjor / elm-debounce

Licence: BSD-3-Clause License
Yet another debouncer for Elm

Programming Languages

elm
856 projects

Projects that are alternatives of or similar to elm-debounce

sagittarius
🎯 A set of javascript most used utils📑
Stars: ✭ 42 (+5%)
Mutual labels:  debounce
debounce-async
A debounce function that delays invoking asynchronous functions.
Stars: ✭ 21 (-47.5%)
Mutual labels:  debounce
MD UISwitch
Uniformly encapsulate different types of switches as user input devices
Stars: ✭ 33 (-17.5%)
Mutual labels:  debounce
concorde.js
A sexy pinnacle of engineering that’s nonetheless incredibly inefficient and expensive and goes out of business because it can’t find enough use. It also provides some tools to deal with the browser.
Stars: ✭ 17 (-57.5%)
Mutual labels:  debounce
RateLimiting.NET
Rate Limiting (debounce, throttle) for C# Portable Class Library
Stars: ✭ 20 (-50%)
Mutual labels:  debounce
anim-event
Event Manager for Animation
Stars: ✭ 25 (-37.5%)
Mutual labels:  debounce
together
Group things together!
Stars: ✭ 35 (-12.5%)
Mutual labels:  debounce
patronum
☄️ Effector operators library delivering modularity and convenience ✨
Stars: ✭ 244 (+510%)
Mutual labels:  debounce
DebounceMonitoring
📑 Add debounce logic for any method in a single line.
Stars: ✭ 44 (+10%)
Mutual labels:  debounce
redebounce
↘️ Render Props component to debounce the given value
Stars: ✭ 14 (-65%)
Mutual labels:  debounce
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (-17.5%)
Mutual labels:  debounce
Unshaky
A software attempt to address the "double key press" issue on Apple's butterfly keyboard [not actively maintained]
Stars: ✭ 2,711 (+6677.5%)
Mutual labels:  debounce
svelte-search
Accessible, customizable Svelte search component
Stars: ✭ 17 (-57.5%)
Mutual labels:  debounce

elm-debounce

Yet another debouncer for Elm.

How to use

This library follows the Elm Architecture. See the full example here.

init : ( Model, Cmd Msg )
init =
  ( { value = ""
    -- Initialize the debouncer.
    , debounce = Debounce.init
    , report = []
    }
  , Cmd.none
  )


type Msg
  = Input String
  | DebounceMsg Debounce.Msg
  ...


-- This defines how the debouncer should work.
-- Choose the strategy for your use case.
debounceConfig : Debounce.Config Msg
debounceConfig =
  { strategy = Debounce.later 1000
  , transform = DebounceMsg
  }


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Input s ->
      let
        -- Push your values here.
        (debounce, cmd) =
          Debounce.push debounceConfig s model.debounce
      in
        ( { model
            | value = s
            , debounce = debounce
          }
        , cmd
        )

    -- This is where commands are actually sent.
    -- The logic can be dependent on the current model.
    -- You can also use all the accumulated values.
    DebounceMsg msg ->
      let
        (debounce, cmd) =
          Debounce.update
            debounceConfig
            (Debounce.takeLast save)
            msg
            model.debounce
      in
        ( { model | debounce = debounce }
        , cmd
        )

    ...

Multiple Debouncers

If you need to debounce multiple event sources, one approach is to repeat the pattern demonstrated above for each event source. For example, you could define a debouncer and debounce msg for each:

init : ( Model, Cmd Msg )
init =
  ( { value = ""
    -- Initialize *multiple* debouncers.
    , fooDebouncer = Debounce.init
    , barDeboucner = Debounce.init
    , report = []
    }
  , Cmd.none
  )

type Msg
  = InputFoo String
  | InputBar String
  | DebounceFoo Debounce.Msg
  | DebounceBar Debounce.Msg

You can choose to either have different configs for each event source:

fooDebounceConfig : Debounce.Config Msg
fooDebounceConfig =
  { strategy = Debounce.later (1 * second)
  , transform = DebounceFoo
  }

barDebounceConfig : Debounce.Config Msg
barDebounceConfig =
  { strategy = Debounce.manual
  , transform = DebounceBar
  }

Or to use the same config for both:

debounceConfig : (Debounce.Msg -> Msg) -> Debounce.Config Msg
debounceConfig debounceMsg =
    { strategy = Debounce.later (1 * second)
    , transform = debounceMsg
    }

Note that the above config function takes your specific debounce msg as it's argument, so for example you might do the following:

Debounce.push (debounceConfig DebounceFoo) fooValue model.fooDebouncer

A full example of this approach can be seen here.

LICENSE

BSD-3-Clause

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].