This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "Delayed Transition Solution" Lesson
[00:00:00]
>> Let's go ahead and make sure that we cannot drag for more than five seconds. That's what the read me said. Two seconds. Yeah, we're gonna make it two seconds, okay. So we're gonna set our timeout here to two seconds, and we're going to use that in a delayed transition.
[00:00:21] So in dragging, we could say after, and then we could specify that timeout that we defined in the delays over here. And we could say, after that timeout, go to idle. And actually, we also want to reset that position too. So we wanna make this the longer objects form and say actions reset position.
[00:00:50] That way, after two seconds of me dragging, it's gonna go right back to idle. And so it's an interesting behavior but that demonstrates just how you could easily add on behavior to something. Which might be a more advanced use case or extra business requirements that you need to do, without having to dig through all the places in your code that might be affected by this two second timer.
[00:01:15] And so one interesting thing about this is that we are doing this reset position on the actions which is gonna set it to its original position, but because we are dragging it, if we drag it for less than two seconds, it's going to stay in that place because remember, it's going to cancel that timer.
[00:01:34] And none of these are implicit events because these are still very real events being sent to the machine. So again, you could consider this after timeout, the same as a special, x date.after, and then timeout and then some other metadata over here. This is the exact same thing.
[00:02:00] And so this is just a nicer way of specifying this.