01.08.2023 в 14:29

Как использовать время отката RXJS с Angular

В этой статье я расскажу вам о концепции времени устранения дребезга и о том, как использовать его в ваших приложениях Angular с операторами RxJS. Время задержки помогает эффективно управлять пользовательским вводом и оптимизировать производительность приложений. Я предоставлю пошаговое руководство, которое поможет вам понять, как использовать время устранения отказов и повысить производительность и удобство использования вашего приложения. Во-первых, давайте рассмотрим, что такое время устранения дребезга.

Что такое Debounce Time?

Время задержки — это метод, используемый для предотвращения слишком частого срабатывания события. Это может быть особенно полезно в ситуациях, когда вы хотите, чтобы пользователь не спамил кнопку или не отправлял чрезмерное количество запросов на сервер. Например, давайте рассмотрим поле поиска ввода, похожее на строку поиска Google. Если пользователь начинает печатать в поле, мы не хотим немедленно отправлять запрос для каждого символа, который он вводит. Вместо этого мы можем использовать время отката, чтобы отложить запрос и гарантировать, что он будет отправлен только после того, как пользователь приостановит ввод на определенное время. Применяя время устранения дребезга, мы можем эффективно управлять пользовательским вводом и предотвращать ненужные вызовы API, что может привести к улучшению взаимодействия с пользователем и повышению производительности приложений. Теперь давайте посмотрим, как использовать время устранения дребезга для нашего приложения Angular.

Как использовать время отката в Angular

Наиболее распространенный подход — применить время устранения дребезга с помощью библиотеки rxjs. Который Angular уже включает в качестве зависимости.

А теперь давайте рассмотрим эти операторы и конвейеры.

debounceTime() pipe

Канал debounceTime — это встроенный канал Angular, который можно использовать для устранения дребезга событий. Чтобы использовать канал debounceTime, вам нужно передать время отката в миллисекундах в качестве аргумента.

distinctUntilChanged()

differentUntilChanged — это оператор, который используется для фильтрации последовательных выбросов одного и того же значения из Observable. Это может быть полезно в ситуациях, когда вы хотите, чтобы Observable не выдавал одно и то же значение несколько раз подряд.

TakeUntil()

Оператор takeUntil() в Angular используется для автоматической отмены подписки на Observable, когда другой Observable выдает значение. Это может быть полезно в ситуациях, когда вы хотите, чтобы Observable не выдавал значения после определенного момента.

В этом уроке я покажу вам, как использовать RxJS для применения времени устранения дребезга к событию ввода. Я продемонстрирую способ реализации времени устранения дребезга в вашем приложении.

Шаг 01: Создайте файл шаблона

В содержимом вашего шаблона

<div class="content" role="main">
  <h1>Welcome</h1>
  <h2>How to Use Debounce Time to Improve the Performance of Your Angular Applications</h2>
  <input type="text" 
  [(ngModel)]="inputText" 
  placeholder="Input something" (input)="onSearch()" />
<br/>
</div>

Выше я реализовал поле ввода с событием ввода, которое запускает функцию устранения дребезга.

Шаг 02: Импортируйте необходимые модули

Откройте файл компонента и импортируйте необходимые модули

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';

Я импортирую необходимые модули: Subject и оператор debounceTime из rxjs/operators.

Шаг 03: Реализуйте логику устранения дребезга

Создайте частный searchSubject, который будет выдавать значения всякий раз, когда вызывается метод onSearch.

export class AppComponent {
  title = 'CodeSandbox';
  private searchSubject = new Subject<string>();
  inputText: string = '';
  ngOnInit() {

  }
  onSearch() {
    this.searchSubject.next(this.inputText);
  }

}

В ловушке жизненного цикла ngOnInit я установил подписку на searchSubject. В этой подписке я использую оператор debounceTime, чтобы ввести задержку перед обработкой отправленных событий. Эта задержка позволяет сбросить таймер, если пользователь продолжает печатать в течение заданного времени (в данном случае 300 мс). Однако, если пользователь приостанавливает ввод на указанное время, searchSubject выдает последнее значение, запуская выполнение метода PerformSearch с этим значением.

export class DebounceExampleComponent implements OnInit, OnDestroy {
  private searchSubject = new Subject<string>();
  private readonly debounceTimeMs = 300; // Set the debounce time (in milliseconds)

  ngOnInit() {
    this.searchSubject.pipe(debounceTime(this.debounceTimeMs)).subscribe((searchValue) => {
      this.performSearch(searchValue);
    });
  }

  ngOnDestroy() {
    this.searchSubject.complete();
  }

  onSearch(searchValue: string) {
    this.searchSubject.next(searchValue);
  }

  performSearch(searchValue: string) {
    // Perform the actual search operation here
    console.log('Performing search for:', searchValue);
    // ... Your search logic ...
  }
}

Заключение

Время отката — это мощный метод управления частотой выполнения событий в приложениях Angular. Стратегически задерживая обработку событий ввода, вы можете оптимизировать производительность и время отклика вашего приложения. Будь то обработка пользовательского ввода или других частых событий, время устранения отказов является ценным инструментом в вашей разработке Angular.

Вот и все!

Конечно, вы, вероятно, захотите увидеть это в действии. Вот рабочая демо-версия, с которой вы можете поиграть или разветвитьс.

Спасибо, что прочитали всю историю!!

#Angular #RxJS

158

Войти на сайт