Coding

debounceTime & distinctUntilChanged | RxJS TUTORIAL

  • 00:00:01 welcome to this video great to have you
  • 00:00:03 on board observables are great and
  • 00:00:05 operators are cubed but it can be hard
  • 00:00:08 to find practical use case for operators
  • 00:00:10 because you need some practice to be
  • 00:00:12 aware of where you might use them so let
  • 00:00:15 me show you a specific pattern which
  • 00:00:17 uses Q operators are X J's operas which
  • 00:00:21 is really an awesome pattern which you
  • 00:00:23 might enhance your application so here
  • 00:00:25 is the next sample we have an input
  • 00:00:26 field trade with the input element and
  • 00:00:28 unwrapping the input event with my
  • 00:00:31 observable here where I use D from event
  • 00:00:34 helper method Q will basically react to
  • 00:00:36 every input event and that I subscribe
  • 00:00:38 so now if I type here at max for example
  • 00:00:41 you see that on every keystroke
  • 00:00:43 the current total value of the input
  • 00:00:46 field was printed out now that would be
  • 00:00:48 useful if we have an application where
  • 00:00:50 we want to validate the existence of
  • 00:00:52 let's say username on every keystroke so
  • 00:00:55 a user is signing up and we want to tell
  • 00:00:57 him write whilst user is typing if the
  • 00:01:00 currently chosen username is available
  • 00:01:03 the issue might be that we of course
  • 00:01:06 need to send an HTTP request to our
  • 00:01:08 back-end to check the existence of
  • 00:01:10 username in our database now if we do
  • 00:01:14 that on every keystroke we're going to
  • 00:01:15 send a lot of requests and for that very
  • 00:01:18 reason we can use our X J's and
  • 00:01:20 operators to control how we do something
  • 00:01:24 the first very useful operator which
  • 00:01:27 might help us with that is debounce time
  • 00:01:30 let me add it here debounce time it's a
  • 00:01:34 simple operator all we have to do here
  • 00:01:36 is we have to pass an argument which
  • 00:01:39 describes the time in milliseconds we
  • 00:01:43 want to wait before we emit a new value
  • 00:01:46 piece you could say it'll become more
  • 00:01:48 clear once you see it in action
  • 00:01:50 so here let's say it has 2,000 for two
  • 00:01:53 seconds and now if you shouldn't get a
  • 00:01:57 new value emitted if it's within this
  • 00:02:00 time frame let me show you how it works
  • 00:02:03 if I need control-enter
  • 00:02:04 and I now start typing watch the console
  • 00:02:07 log use these nap again but after two
  • 00:02:11 seconds we get max and the average two
  • 00:02:13 events we're at
  • 00:02:15 em and then where we had em a were
  • 00:02:17 simply dropped and that happens you to D
  • 00:02:21 bound time now you might say well dad
  • 00:02:24 looks a lot like throttle what we also
  • 00:02:27 could pass for tire span and then it
  • 00:02:30 would only emit a new value off this
  • 00:02:32 time span has passed right it works a
  • 00:02:35 bit differently though here a new value
  • 00:02:37 will only be emitted if nothing happened
  • 00:02:40 for two seconds so this is if Y if I
  • 00:02:45 keep typing here and I type and I type
  • 00:02:47 and I relate some characters which souls
  • 00:02:49 are kind of typing all the fire in the
  • 00:02:51 input element you see it never emits the
  • 00:02:54 value we still have max from before now
  • 00:02:56 only if I stop typing here down wait and
  • 00:03:00 after two seconds of no value being
  • 00:03:03 emitted so of me not typing since we
  • 00:03:05 emit a new value on every keystroke we
  • 00:03:08 get the current value and this is what P
  • 00:03:10 pounds time does it simply check that
  • 00:03:12 there has been a pause of value
  • 00:03:14 emissions for the times when you specify
  • 00:03:17 here and then it will simply give you
  • 00:03:19 the latest value and all the hours will
  • 00:03:22 be dropped and that can be very useful
  • 00:03:24 because it means that every set is not
  • 00:03:26 two seconds but maybe two 500
  • 00:03:28 milliseconds that they can really let
  • 00:03:30 the user type his name also incorrect
  • 00:03:33 something but then after a brief pause
  • 00:03:36 we actually get the value and of course
  • 00:03:39 this was not that impressive because I
  • 00:03:41 forget through it control-enter so now
  • 00:03:44 again you see I can even believe
  • 00:03:45 something but now if I stop for half a
  • 00:03:48 second we get the value this is Yvonne's
  • 00:03:51 time and this is already a great
  • 00:03:52 enhancement because if you come back to
  • 00:03:55 the example of sending HTTP requests
  • 00:03:57 here we would send only one HTTP request
  • 00:04:01 and even if the user stops for half a
  • 00:04:04 second and then continues typing we
  • 00:04:06 might have more but we don't have as
  • 00:04:08 many as if we were to send them on every
  • 00:04:11 keystroke however we do have one issue
  • 00:04:14 here what if the user decides oh I miss
  • 00:04:16 type and then oh I was correct now you
  • 00:04:19 see indicated by this Q here that the
  • 00:04:22 same value was in this again because the
  • 00:04:25 user type something then you pause for
  • 00:04:26 half
  • 00:04:27 second and a debounce time does it gave
  • 00:04:30 us the latest value here however the
  • 00:04:33 latest value is equal to the value we
  • 00:04:35 had before and that might be DDA
  • 00:04:39 behavior you're looking for but it might
  • 00:04:41 also not be the case
  • 00:04:43 it would be nice if you could also
  • 00:04:44 filter out values which are equal to the
  • 00:04:48 last one and that is what the second
  • 00:04:50 useful operator does this thing until
  • 00:04:54 changed now this comes after debounce
  • 00:04:57 time because if we were to place it in
  • 00:04:59 front of the bounce time we would rarely
  • 00:05:02 have a case where the last total value
  • 00:05:05 of the input field is the same as now
  • 00:05:08 after we press the key right because we
  • 00:05:10 press a key we probably change something
  • 00:05:12 so ostrich bones times though we can
  • 00:05:15 rule out cases like this one so now if I
  • 00:05:18 clear the console hit ctrl enter and now
  • 00:05:21 I type Maximilian we get Maximilian and
  • 00:05:24 now to do the same before to leave that
  • 00:05:26 and retype it quickly you see I still
  • 00:05:28 get it so shouldn't we not get this
  • 00:05:31 anymore
  • 00:05:32 well yes but keep in mind our value of
  • 00:05:36 the omission here so what we omit it is
  • 00:05:40 not the total value of the input field
  • 00:05:43 we get it here with event.target the
  • 00:05:45 value we do get at this point of time
  • 00:05:47 it's just the event and he went now of
  • 00:05:51 course this difference the last one even
  • 00:05:53 if the total value is still the same so
  • 00:05:55 what we can simply do is we can throw in
  • 00:05:57 a map before all of that math allows us
  • 00:06:02 to transform the value and here we know
  • 00:06:04 we get event but maybe I just want to
  • 00:06:07 return the event target value which also
  • 00:06:10 means down here I get you finish the
  • 00:06:13 value so I can Alfred that and if I now
  • 00:06:16 it control enter and we do the same
  • 00:06:17 again I type Maximilian we get
  • 00:06:20 Maximilian in the finality of the Sega
  • 00:06:22 or you see no new that new value was
  • 00:06:24 omitted because we don't have to – next
  • 00:06:26 to Maximilian if I change something else
  • 00:06:28 though we do get it because now the
  • 00:06:31 value of our admission of our observable
  • 00:06:34 emission here is the total input and
  • 00:06:37 that now doesn't change if I do this
  • 00:06:40 here is the same so no new value
  • 00:06:42 submitted so that is how you can
  • 00:06:44 cleverly combine a couple of operators
  • 00:06:47 namely be bound time and distance until
  • 00:06:49 change with math to make sure we're
  • 00:06:52 using the right value queue maybe
  • 00:06:55 enhancer replication and in this case
  • 00:06:57 send only one HTTP request instead of
  • 00:07:00 thousands so I hope this was useful and
  • 00:07:02 kind of get you thinking on how you may
  • 00:07:04 use observables and I can only encourage
  • 00:07:06 you to play around with these operators
  • 00:07:08 to point out how to best use them