# When is \`Cmd\` actually processed?

**URL:** <https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008>\
**Category:** Learn\
**Created:** [March 25, 2018, 2:14pm UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008 "2018-03-25T14:14:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![arowM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/arowm/32/4999_2.png) [@arowM](https://discourse.elm-lang.org/u/arowM)\
**Post date:** [March 25, 2018, 2:14pm UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/1 "2018-03-25T14:14:16Z")

</div>

When is `Cmd` specified in `update` function actually processed?  
Is it the same timing when DOM changes begins, or after completing DOM changes?

For instance, in the example bellow, is the `someCmd` actually processed after successfully changed DOM structure for `changeToModel`?

```auto
update msg model =
    case msg of
        SomeMsg ->
            ( changeToModel model
            , someCmd
            )

```

If it is not after completed DOM changes, how can we write actions that should be processed after DOM changes (e.g., scroll events for new DOM structures)?

---

<div class="post-metadata">

**Author:** ![ilias](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilias/32/6_2.png) [@ilias](https://discourse.elm-lang.org/u/ilias)\
**Post date:** [March 25, 2018, 4:38pm UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/2 "2018-03-25T16:38:50Z")

</div>

The exact sequence is something like this:

1. `update` returns `model` and a batch of commands
2. an animation-frame is requested with the diffing and rendering of the view as its callback
3. commands and subscriptions are “distributed” to their effect managers

This ordering has an interesting property: if a command (like an HTTP request) doesn’t care about the view being rendered first, it won’t “wait” for that to happen. However, if a command (like `Dom.focus`) _does_ care, it can wait for the view to be rendered rather simply: all it needs to do is wrap itself in `requestAnimationFrame`.

The trick is that calling `requestAnimationFrame` multiple times with different callbacks will ensure that the callback are also executed in the order in which they were queued. Since the `view` is queued before commands begin executing, commands can use this trick to ensure they run _after_ view-rendering.

Libraries like `elm-lang/dom` already use this trick, so when you return `( { model | renderMyDiv = True }, Task.attempt FocusResult (Dom.focus "input-in-my-div") )` for example, the `view` is rendered before focussing is actually attempted.

When you’re dealing with `ports`, you can use a similar trick. On the Elm side, nothing changes - you simply call your port. On the JS side, you can do something like this:

```auto
elm.app.ports.foo.subscribe(function (id) {
  requestAnimationFrame(function () {
    /* when this callback executes, the view should have rendered. */
  })
})

```

---

<div class="post-metadata">

**Author:** ![arowM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/arowm/32/4999_2.png) [@arowM](https://discourse.elm-lang.org/u/arowM)\
**Post date:** [March 25, 2018, 5:29pm UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/3 "2018-03-25T17:29:02Z")

</div>

Thanks a lot!  
The way for ports is also super helpful for me.

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gampleman/32/43_2.png) [@gampleman](https://discourse.elm-lang.org/u/gampleman)\
**Post date:** [March 26, 2018, 8:09am UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/4 "2018-03-26T08:09:36Z")

</div>

I feel like this answer should be put into the docs somewhere. Super helpful.

---

<div class="post-metadata">

**Author:** ![joefiorini](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joefiorini/32/665_2.png) [@joefiorini](https://discourse.elm-lang.org/u/joefiorini)\
**Post date:** [March 26, 2018, 11:44pm UTC](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/5 "2018-03-26T23:44:14Z")

</div>

Great explanation! Thank you! I believe that Evan (or maybe someone else) mentioned that this is going to change (maybe optionally?) in 0.19 allowing you to run Cmds (or perhaps this was for ports) in the same tick as the code that called it. This was in the context of supporting certain events that require code to be run sync (as opposed to async via setTimeout or requestAnimationFrame). I’ll see if I can find the link when I’m not on my phone, but curious if I’m understanding that correctly…

UPDATE: I did find [the post in question](https://discourse.elm-lang.org/t/window-confirm-without-native-code/844/3), and Evan actually said that _ports_ are changing to be able to be run as direct event handlers, not Cmds.