Check out a free preview of the full State Machines in JavaScript with XState course:
The "Delayed Transition Exercise" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to build functionality ensuring that the box element cannot be dragged for more than two seconds, after David explains that transitions happen in zero time, are never asynchronous, and that delayed transitions have a delay action.

Get Unlimited Access Now

Transcript from the "Delayed Transition Exercise" Lesson

[00:00:00]
>> All right, so in this lesson we're going to be talking about delayed transitions. And one thing to know about transitions and state machines is that transitions happen in zero time, always. So when you have an event in one state, that transitions to another state, you can always assume that that's going to happen in zero time.

[00:00:21] Transitions are never asynchronous. And that's why if you're trying to model something such as async await with with a state machine, because state machines are never async you would be modeling idle, then loading then success and so that in between async state would be that loading state. However, we could have delayed transitions that as it was originally described by David Harrell, in his paper, and we have to do a little bit of trickery in order to do this, but it is natively supported in x state.

[00:00:55] So in this case, when we're in the bright states, after 5000 milliseconds, we transition to the dim states. This is how this transition works. You could think of it as a transition that's immediately taken after 5000 milliseconds. So here's how that works. What x state is doing is it's using concepts that you already know now.

[00:01:19] When we enter this bright states, we have this special delay action. That tells the interpreter to send this machine, a special x date .after with some extra metadata after it and to send that after the specified delayed. So it's going to say, we're going to send this event after say, 5,000 milliseconds.

[00:01:46] Now if we change dates, then we also need a way to cancel that event. And x date takes care of that as well. So when you exit this date, we tell it that's the way we just sent another event to cancel that delay. And that tells the interpreter that we no longer wants to send that event after 5000 milliseconds.

[00:02:07] So let's take a look at what that looks like in x dates. So if we go to exercise number eight, let's go into the read me for me. All right, so, in this exercise, it's pretty simple. All you have to do is ensure that you cannot drag a box for more than two seconds.

[00:02:39] So the after syntax for x date is or the delay syntax is literally just after. So let's say that we are on so let's close that, weight index.js. All right, great. So let's say that we want something to happen after 5 seconds. In order to express that in exit, we could say after, and then we could give it, Let's see.

[00:03:18] 5000 and then we could tell it to go to a state. Or remember this is shorthand for a transition, so you could have target some states, or you could do some sort of action. For now let's just have an action just to see what happens. So actions, console.log, something happened after five seconds, all right.

[00:03:50] Then when we go to our exercise, we're gonna see that after five seconds, something is going to happen in the console. And indeed it did. So something happened after five seconds. Now notice that when we're in this idle state and we go to the dragging state, this five second timeout is going to be canceled.

[00:04:11] So let's try that. Because dragging in 1, 2, 3, 4, 5, you'll notice that it was canceled and that happened because we went to the next idle state. So, that was actually pretty poor timing, but delay actions are canceled after the timeouts. So another way to see this is if we log the state.

[00:04:40] So console.log, state.actions. We can see all the actions that are supposed to happen in the state. So when we, have a minute to just move this up here. All right, so a lot of actions are happening, and that's because I'm moving my mouse, but you can see over here we have that special x date after action.

[00:05:04] And so it's telling us that something is gonna happen after those 5000 milliseconds. And in this case, it's going to send this event writes back to the machine. And so if we do something where we cancel it, so let me just, words. You could see that when I dragged, we have this xstate cancel action.

[00:05:31] And so it's going to say, hey, we just exited the state so that event that we just sent which was a delayed event, we don't need it anymore. So your goal in this exercise, which is a pretty straightforward exercise, is that while we're dragging, after two seconds, we want to transition back to the idle states.

[00:05:56] And you're gonna use this exact same syntax over here, after in the timeouts and the actions right here. Another way that you could specify the timeout, is by having it as some sort of string. So instead of a number, just a string such as timeout, and then you could specify that timeout as the options .delays property.

[00:06:19] So we could say timeout, 5 seconds and something is going to happen after 5 seconds still. All right.