# Updating the view every few ms

**URL:** <https://discourse.elm-lang.org/t/updating-the-view-every-few-ms/3588>\
**Category:** Learn\
**Created:** [May 2, 2019, 6:46am UTC](https://discourse.elm-lang.org/t/updating-the-view-every-few-ms/3588 "2019-05-02T06:46:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dimi\_Shahbaz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dimi_shahbaz/32/2091_2.png) [@Dimi\_Shahbaz](https://discourse.elm-lang.org/u/Dimi_Shahbaz)\
**Post date:** [May 2, 2019, 6:46am UTC](https://discourse.elm-lang.org/t/updating-the-view-every-few-ms/3588/1 "2019-05-02T06:46:48Z")

</div>

Hi,

I’m going through the Elm guide, and working through [https://guide.elm-lang.org/effects/random.html](https://guide.elm-lang.org/effects/random.html). I’m stuck on trying one of the expansion ideas at the bottom:

- Have the dice flip around randomly before they settle on a final value.

One thought I had to do this was to:

1. add a `tumbleCount` to the model  
`type alias Model = { tumbleCount : TumbleCount , rolls : DiceValues }`
2. add a Tumble message:  
`type Msg = Roll | Tumble DiceValues | Landed DiceValues`  
where:  
`type alias DiceValues = List Int`
3. set `tumbleCount` to e.g. 10 when the `Roll` message is received in `update`
4. decrement the `tumbleCount`, and settle on a `DiceValues` when it hits zero

This makes update look like:

```
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Roll ->
                -- User clicked roll button, start tumbling
            ( { model | tumbleCount = 10 }
            , Random.generate Tumble rolls
            )

        Tumble newRolls ->
            let
                c =
                    (log "tumbleCount" model).tumbleCount
            in
            if c == 0 then
                -- Finished tumbling
                ( model
                , Random.generate Landed rolls
                )

            else
                -- Tumbling continues
                ( { model | tumbleCount = model.tumbleCount - 1, rolls = newRolls }
                , Random.generate Tumble rolls
                )

        Landed newRolls ->
            ( { model | rolls = newRolls }
            , Cmd.none
            )

```

The problem is that only the last `Landed` msg causes the dice view to update. Judging from the `log` calls, the right stuff is happening to the model, but either they are happening too fast to cause visible updates to the die faces, or, since they are chained too quickly, the `Tumble` updates are getting collapsed (and ignored) so that the view is not updated. Is that what’s happening?

All of which is to say (if I haven’t XY problemed this problem already): I want to update the view every 200ms or so while the dice are tumbling. How can I do that?

Thanks!

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [May 2, 2019, 7:08am UTC](https://discourse.elm-lang.org/t/updating-the-view-every-few-ms/3588/2 "2019-05-02T07:08:22Z")

</div>

> [@Dimi\_Shahbaz](#):
>
> but either they are happening too fast

this intuition is correct. You burn through those 10 rolls in about 160 ms which is too little to notice visually.

To solve this you need to introduce some time into your rolls. You can do this either by using `Browser.Events.onAnimationFrameDelta ` and an accumulator that you use to trigger the next tumble OR you can use `Process.sleep` and sleep few hundred milliseconds between tumbles.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 12, 2019, 7:08am UTC](https://discourse.elm-lang.org/t/updating-the-view-every-few-ms/3588/3 "2019-05-12T07:08:23Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.