Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "Anti-shaking method of angular Asynchronous Validator". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Background:

The formControl of the current input box sets an asynchronous validator, which will request the background according to the current value to determine whether it exists in the database.

Original Asynchronous Validator:

VehicleBrandNameNotExist (): AsyncValidatorFn {return (control: AbstractControl): Observable = > {if (control.value =') {return of (null);} return this.vehicleBrandService.existByName (control.value) .pipe (map (exists = > exists? {vehicleBrandNameExist: true}: null));};}

But after testing, it is found that the asynchronous validator is triggered too frequently. Each letter entered in the input box will make a request to the background, which is not conducive to saving resources.

Anti-shaking throttling

This related operation is called anti-shaking and throttling. What is anti-shaking and throttling? What's the difference?

In essence, it is a means to optimize high-frequency code execution.

For example, when events such as mouse clicks and keyboard input are triggered by the browser, the callback functions bound to the events will be called frequently, which will affect the utilization of resources to a certain extent.

To optimize, we need anti-shake (debounce) and throttling (throttle) to reduce the frequency of calls.

Definition:

Anti-shake: the event is executed after n seconds. If it is triggered repeatedly within n seconds, it will be rescheduled.

Throttling: run only once in n seconds. If it is triggered repeatedly within n seconds, it will only take effect once.

Give an example to illustrate:

When taking the subway, when passing the gate, the back door closes 3 seconds after everyone enters, waiting for the next person to enter.

After the gate is opened, wait for 3 seconds, if someone passes again, wait for a rescheduling for 3 seconds, until no one passes through and close after 3 seconds, this is anti-shaking.

After the gate is opened, it is closed on time every 3 seconds, and the interval is executed, which is throttling.

Code implementation:

The anti-shaking operation just meets our needs.

When looking for the anti-shake code implementation in the asynchronous validator, you happen to see the article written by the senior liyiheng:

Https://www.yisu.com/article/175497.htm, so I made a reference.

This is just a step to explain how the formContorl Asynchronous Validator in angular prevents shaking:

1. Create (overwrite) an asynchronous validator

VehicleBrandNameNotExist (): AsyncValidatorFn {return (control: AbstractControl): Observable = > {if (control.value = =') {return of (null) } return control.valueChanges.pipe (/ / Anti-shake time, unit millisecond debounceTime (1000), / / filter out repeated elements distinctUntilChanged (), / / call the service, get the result switchMap (value = > this.vehicleBrandService.existByName (value)), / / A pair of results are processed, and null indicates correct Object represents error map ((exists: boolean) = > (exists? {vehicleBrandNameExist: true}: null)), / / the result of each verification is unique, truncating stream first ()} }

Add an asynchronous validator

Let formControl = new FormControl ('', [], asyncValidate.vehicleBrandNameNotExist ())

Then we can bind the fromControl to the relevant tags in the v layer.

Doubt

The relevant operation is over here and can be used normally.

But there are still some doubts after the rewriting.

The original version was used like this:

Return this.vehicleBrandService.existByName (...)

This is how it is used after rewriting:

Return control.valueChanges.pipe (...

The rewrite uses valueChanges, which produces an observable that emits an event whenever the value of the control changes.

So, after each call to the asynchronous validator, we use valueChanges every time, is it the same observable every time?

So I took the test:

Principle: call the asynchronous validator many times and cache ovservable. If it is different, the output is "unequal".

Test result: as shown in the figure, only the output is not equal at the first initialization, because the observable is undefined for the first time. After having a value, the asynchronous validator is called several times to find that the observabel is always the same.

Use of first ()

I didn't understand the use of first before, but after reading the senior's article, I realized that first () to avoid returning values like this many times.

So the observable we generated is in the pending state all the time, and we just need to use first to get it back to the first value.

Return control.valueChanges.pipe (first ()) unit test

A good function requires a good unit test.

1 it ('should create an instance', async () = > {2 expect (asyncValidate). ToBeTruthy (); 3 let formControl = new FormControl ('', [], asyncValidate.vehicleBrandNameNotExist ()); 4 formControl.setValue ('repetitive vehicle brand'); 5 / wait for anti-shake to finish 6 await new Promise (resolve = > setTimeout (resolve, 1000); 7 getTestScheduler (). Flush (); 8 expect (formControl.errors.vehicleBrandNameExist). ToBeTrue ();...})

Originally, the unit test I wrote said something like this.

Waiting for the anti-shake to be over, I used await new Promise and setTimeout. When you get to line 8, let the thread wait for 1 second.

After being corrected by the teacher, I found that this was not good. If a test needs to wait for an hour, then our execution time will take 1 hour, which is obviously unrealistic.

So fakeAsync is used here.

FakeAsync

FakeAsync, literally pseudo-asynchronous, is actually synchronous.

Use tick () to simulate the asynchronous passage of time.

Official test code:

Emulate the test code:

I printed new Date () before and after tick (), that is, the time at that time, and what was the result?

You can see that 17:19:30 is printed first, which is the time of the test at that time.

But after tick (10000000), the print time is 20:06:10, reaching a future time.

And these two statements are printed almost at the same time, that is, the unit test doesn't really make us wait for 10000000ms.

So after testing, we can use tick (1000) and fakeAsync to simulate that the anti-shake time is over.

It ('should create an instance', fakeAsync (()) = > {expect (asyncValidate). ToBeTruthy (); let formControl = new FormControl (', [], asyncValidate.vehicleBrandNameNotExist ()); formControl.setValue ('repetitive vehicle brand'); / / waiting for anti-shake to finish tick (1000); getTestScheduler (). Flush (); expect (formControl.errors.vehicleBrandNameExist). ToBeTrue ();})

I also encountered an error when writing to the background:

It said that my color did not set the default value, but when I went back, I saw that it had already been set.

I hit a lot of breakpoints, but I didn't find a problem.

Later, when I went to the database, I saw how there are two, one is colour, the other is color.

After looking at the previously submitted code, I found that I used color before, and then replaced it with colour.

But my jpa hibernate is set to update, so the database is updated accordingly, so the last field is not deleted, which results in two fields in the database. Then delete one of them and you'll be fine.

Jpa: hibernate: ddl-auto: update supplement

Google later found a more concise and easy-to-understand way:

Instead of calling operators such as first (), you can use the return value of timer () as an observable.

The purpose of time is here:

Https://rxjs-cn.github.io/lea...

To put it simply, a value is emitted when the timer ends.

This principle speculates that when the timer is not finished and the asynchronous validator is repeatedly called, the form ignores the timer and focuses on the new one.

Of course, just guess, have the opportunity to add, after testing the anti-shaking function is normal.

Export class VehicleBrandAsyncValidator {/ * anti-shake time * / debounceTime = 1000; constructor (private vehicleBrandService: VehicleBrandService) {} / * Verification method, vehicle brand name * / vehicleBrandNameNotExist (): AsyncValidatorFn {return (control: AbstractControl): Observable = > {if (control.value = =') {return of (null) } return timer (this.debounceTime) .pipe (/ / call the service to get the result switchMap (() = > this.vehicleBrandService.existByName (control.value)), / / A pair of results are processed, null indicates correct, object indicates error map ((exists: boolean) = > (exists? {vehicleBrandNameExist: true}: null),)} This is the end of the content of "Anti-shaking method of angular Asynchronous Validator". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.