diff --git a/day3/README.md b/day3/README.md index 83b4f42..586c589 100644 --- a/day3/README.md +++ b/day3/README.md @@ -7,6 +7,7 @@ 1. Switch from a Promise to an Observable 1. Make typing into an input field an observable 1. Have a subscriber act only after a pause in events from an observable +1. Check for distinct events from an observable ## Describe publish/subscribe model and how it relates to Observables @@ -29,7 +30,7 @@ Firstly, we want it to search as the user types into the input (like how google ``` -Test it out. In the network tab of your Chrome Developer Tools, see how a request goes out for every letter? And they don't always come back in order, either. With Observables, we can fix this. +Test it out. In the network tab of your Chrome Developer Tools, see how a request goes out for every letter? This can use up data unnecessarily. Also, the responses don't always come back in order. With Observables, we can fix this. ## Switch from a Promise to an Observable @@ -139,7 +140,7 @@ Now add `debounceTime` to the subscription in `ngOnInit()`: ```javascript ngOnInit() { this.searchSubject - .debounceTime(300) + .debounceTime(300) //add this .subscribe(name => { this.http.get('http://swapi.co/api/people/?search=' + name) .subscribe(response => this.results = response.json().results); @@ -148,3 +149,27 @@ ngOnInit() { ``` Now try typing. You should see that a request goes out only when you pause your typing. + +## Check for distinct events from an observable + +Try selecting the input with your cursor, typing in a value, and then hitting tab to make the cursor move away from the input box. You should see a second request go out to the same location, even though the search value is the same as before. Let's fix this. + +Just like with `debounceTime`, we want to add the `distinctUntilChanged` ability. This will examine the current event to see if it was the same as the previous event. If it is, it will discard it. Add the following: + +```javascript +import 'rxjs/add/operator/distinctUntilChanged'; +``` + +Now alter the subscriber in `ngOnInit`: + +```javascript +ngOnInit() { + this.searchSubject + .debounceTime(300) + .distinctUntilChanged() //add this + .subscribe(name => { + this.http.get('http://swapi.co/api/people/?search=' + name) + .subscribe(response => this.results = response.json().results); + }) +} +``` diff --git a/day3/starwars/src/app/search/search.component.ts b/day3/starwars/src/app/search/search.component.ts index 2616108..332feff 100644 --- a/day3/starwars/src/app/search/search.component.ts +++ b/day3/starwars/src/app/search/search.component.ts @@ -3,6 +3,7 @@ import { Http } from '@angular/http'; import { Subject } from 'rxjs/Subject' import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; @Component({ selector: 'app-search', @@ -25,6 +26,7 @@ export class SearchComponent implements OnInit { ngOnInit() { this.searchSubject .debounceTime(300) + .distinctUntilChanged() .subscribe(name => { this.http.get('http://swapi.co/api/people/?search=' + name) .subscribe(response => this.results = response.json().results);