Angular 18-serien (seksogtyve) implementerer lazy search-funktioner baseret på RXJS

Lille skarn · Opslået på 28/10/2024 17.18.59

Krav: Når teksten ændres, bør back-end-interfacet kaldes for at forespørge nøgleordene og returnere data, men ofte har brugeren ikke indtastet nøgleordene fuldt ud, og tekstændringshændelsen vil blive udløst mange gange, hvilket vil lægge pres på backend-interfacet til ofte at anmode, og der er også et vist pres på front-end hyppig rendering. Hvordan implementerer man funktionen for forsinket søgning? Det vil sige, når brugeren indtaster nøgleordet helt, kaldes backend-interfaceforespørgslen.

For at lette præsentationen er her rammenForsinkelse med ét sekund, renderingerne er som følger:

HTML-sidekode:

Login er synlig.

TS-komponentkoden er som følger:

Login er synlig.

(Slut)

Lille skarn · Opslået på 15/05/2025 08.44.41

debounceTime()-pipeline
DebounceTime-pipelinen er en indbygget pipeline i Angular, som kan bruges til at debounce begivenheder. For at bruge debounceTime-pipelinen skal du overføre debounce-tiden (i millisekunder) som parameter
distinktTilChanged()
distinctUntilChanged er en operator, der filtrerer de samme værdier fra, som affyres fortløbende i en Observable. Dette er nyttigt i situationer, hvor du vil forhindre, at Observablen affyrer den samme værdi flere gange i træk.

Lille skarn · Opslået på 15/05/2025 09.29.33

AsyncValidatorFn validerer latensstabilisering

Login er synlig.

Henvisning:Hyperlink-login er synlig.

Lille skarn · Opslået på 15/05/2025 09.33.52

Lille sløgg Opslået den 15-5-2025 09:29
AsyncValidatorFn validerer latensstabilisering

Reference: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

[Kantet] Angular 18-serien (seksogtyve) implementerer lazy search-funktioner baseret på RXJS

Relaterede indlæg

Afsnit set