rxjs#debounceTime TypeScript Examples

public constructor(
    private _addonProviderService: AddonProviderFactory,
    private _sensitiveStorageService: SensitiveStorageService,
    private _translateService: TranslateService,
    private _dialogFactory: DialogFactory,
    private _linkService: LinkService
  ) {
    this._addonProviderService.addonProviderChange$.subscribe(() => {
      this.loadProviderStates();
    });

    this.preferenceForm.valueChanges
      .pipe(
        takeUntil(this.destroy$),
        debounceTime(300),
        switchMap((ch) => {
          const tasks: Observable<any>[] = [];
          if (typeof ch?.cfV2ApiKey === "string") {
            tasks.push(from(this._sensitiveStorageService.setAsync(PREF_CF2_API_KEY, ch.cfV2ApiKey)));
          }
          if (typeof ch?.ghPersonalAccessToken === "string") {
            tasks.push(
              from(this._sensitiveStorageService.setAsync(PREF_GITHUB_PERSONAL_ACCESS_TOKEN, ch.ghPersonalAccessToken))
            );
          }
          return combineLatest(tasks);
        }),
        catchError((e) => {
          console.error(e);
          return of(undefined);
        })
      )
      .subscribe();
  }

watchLabelsChange() {
    this.depose$$.next();
    const cdr = this.injector.get(ChangeDetectorRef);
    // FIXME: Is there any better way to achieve this?
    combineLatest(
      this.treeItems.map(({ labelChange }) => labelChange).filter(Boolean),
    )
      .pipe(debounceTime(0), takeUntil(this.depose$$))
      .subscribe(() => cdr.markForCheck());
  }

ngAfterContentInit() {
    this.hasVisibleSuggestion$ = this.suggestions.changes.pipe(
      startWith(this.suggestions),
      switchMap((suggestions: QueryList<SuggestionComponent>) =>
        suggestions.length > 0
          ? combineLatest(suggestions.map(suggestion => suggestion.visible$))
          : of([] as boolean[]),
      ),
      map(visible => visible.some(Boolean)),
      withLatestFrom(this.directive$$),
      map(([hasVisibleSuggestion, directive]) => {
        if (hasVisibleSuggestion && directive.defaultFirstSuggestion) {
          directive.autoFocusFirstSuggestion();
        }
        return hasVisibleSuggestion;
      }),
      distinctUntilChanged(),
      debounceTime(0),
      tap(() => this.cdr.markForCheck()),
      publishRef(),
    );

    this.hasContent$ = combineLatest([
      this.hasVisibleSuggestion$,
      this.placeholder.changes.pipe(
        startWith(this.placeholder),
        map(
          (list: QueryList<AutocompletePlaceholderComponent>) => !!list.length,
        ),
      ),
    ]).pipe(
      map(
        ([hasVisibleSuggestion, hasPlaceholder]) =>
          hasVisibleSuggestion || hasPlaceholder,
      ),
    );
  }

override ngAfterViewInit() {
    const input = this.input;

    merge(
      fromEvent(this.elRef.nativeElement, 'click'),
      fromEvent(input, 'focus'),
    )
      .pipe(debounceTime(0), takeUntil(this.unsubscribe$))
      .subscribe(() => this.onFocus());

    fromEvent(input, 'blur')
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(() => this.onBlur());

    fromEvent(input, 'input')
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(ev => this.onInput(ev));

    fromEvent<KeyboardEvent>(input, 'keydown')
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(ev => this.onKeyDown(ev));
  }

ngOnInit() {
    this.show.pipe(debounceTime(0)).subscribe(() => {
      if (this.menu.lazyContent) {
        this.menu.lazyContent.attach(this.lazyContentContext);
        this.updatePosition();
      }
    });

    this.hide.subscribe(() => {
      if (this.menu.lazyContent) {
        this.menu.lazyContent.detach();
      }
    });
  }

constructor(
    protected overlay: Overlay,
    protected viewContainerRef: ViewContainerRef,
    protected elRef: ElementRef<HTMLInputElement>,
    protected renderer: Renderer2,
    protected cdr: ChangeDetectorRef,
    protected ngZone: NgZone,
  ) {
    this.tooltipChanged$.pipe(debounceTime(0)).subscribe(() => {
      this.updatePosition();
    });
  }

change$ = new Observable<ChangeEvent>((sub) => {
  let destroyed = false;
  let listener = (changes: ChangeEvent) => {
    if (!destroyed) {
      sub.next(changes);
    }
  };
  // TODO: onChanged seems not return off hook
  const unsubscribe = logseq.DB.onChanged(listener);
  return () => {
    unsubscribe();
    destroyed = true;
  };
})
  .pipe(debounceTime(500))
  .pipe(startWith(null))

ngAfterViewInit() {
    const { injectId, containerEl, scrollableEl } = this.parent;
    const pageContentEl = containerEl.closest('.aui-page__content');
    const paddingTop = pageContentEl
      ? +getComputedStyle(pageContentEl).paddingTop.slice(0, -2)
      : 0;
    fromEvent(scrollableEl, 'scroll')
      .pipe(
        debounceTime(100),
        switchMap(() => {
          const { scrollTop } =
            scrollableEl === window
              ? document.documentElement
              : (scrollableEl as HTMLElement);
          const activedItem =
            this.items.find(
              ({ target }) =>
                target.offsetTop +
                  target.offsetHeight / 2 +
                  ((scrollableEl === window &&
                    (target.offsetParent as HTMLElement)?.offsetTop) ||
                    0) >
                scrollTop + paddingTop,
            ) || last(this.items);
          return activedItem ? of(activedItem) : EMPTY;
        }),
        tap(activedItem => {
          if (activedItem.id) {
            this.activeId = activedItem.id;
            this.cdr.markForCheck();
          }
        }),
        debounceTime(100),
        tap(activedItem => {
          if (injectId && activedItem.id) {
            history.replaceState(
              null,
              null,
              location.pathname + location.search + '#' + activedItem.id,
            );
          }
        }),
        takeUntil(this.destroy$$),
      )
      .subscribe();
  }

ngAfterContentInit() {
    const actived$ = this._scrollTop$
      .pipe(
        startWith(this.scrollTop),
        debounceTime(200),
        map(scrollTop =>
          this._contents.reduce(
            this.isScrollEnd
              ? this.getMaxContent.bind(this)
              : this.getMinContent(scrollTop),
          ),
        ),
        map(actived => actived.auiTocContent),
      )
      .pipe(
        tap(actived => {
          this._contents.forEach(content => {
            content.active = actived === content.auiTocContent;
          });
          this.cdr.detectChanges();
        }),
      );

    const scrollTween$ = this._scrollTo$.pipe(
      switchMap(name => {
        const target = this._contents.find(
          content => content.auiTocContent === name,
        );

        if (!target) {
          return EMPTY;
        }
        const destination = this.getOffsetTop(target.nativeElement);

        const start = performance.now();
        const source = this.scrollTop;
        const duration = 500;

        return of(0).pipe(
          observeOn(animationFrameScheduler),
          repeat(),
          map(() => (performance.now() - start) / duration),
          takeWhile(t => t < 1),
          endWith(1),
          map(t => t * t * t),
          map(t => source * (1 - t) + destination * t),
        );
      }),
      takeUntil(this._onDestroy$),
    );

    this._subs.push(
      actived$.subscribe(this.activedChange),
      scrollTween$.subscribe(tweenValue => {
        this.scrollTop = tweenValue;
      }),
    );
  }