Angular 4, Как обновить [(ngModel)] с задержкой в ​​1 секунду

Rxjs и Observables - идеальный кандидат для этого типа задач! Вот пример того, как этого можно достичь:

Шаблон:

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

Компонент:

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

subject - это тип объекта, который действует как наблюдаемый и как наблюдатель - это означает, что вы можете как подписаться на него, так и испускать из него значения (с next())!

debounceTime ожидает в течение указанного времени в мс, пока не разрешит новые изменения

distinctUntilChanges не позволит один и тот же ввод пройти два раза подряд

switchMap берет последнюю наблюдаемую из цепочки, поэтому вы не можете получить сразу несколько результатов

Ответ Фредрика Лундина, обновленного для Angular 6:

Шаблон:

<input type="text" [value]="item.task_name" (keyup)="term$.next($event.target.value)">

Компонент:

import ......

import { Subject, EMPTY } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component{(
  ...
)}
export class YourComponent implements OnDestroy {

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}

Множество решений с использованием setTimeout(), но это приведет к тому, что функция будет вызываться каждый раз при изменении модели, простой способ предотвратить это - сначала очистить тайм-аут.

e.g.

timeOut;
timeOutDuration = 1000;

update_fields(data) {
  clearTimeout(this.timeOut);
  this.timeOut = setTimeout(() => {
     //do something
  }, this.timeOutDuration);
}

это вызовет функцию только один раз после того, как будет выполнено последнее обновление и истечет timeOutDuration

Добавьте задержку в свой update_fields() метод.

Нравится:

public update_fields(data)
  setTimeout(function() {
   //call service
  }, 1000);

Вот решение, которое работает с обратным вызовом.

просмотреть шаблон:

<input ... #element (ngModelChange)="delayAction(element, doSomething, [$event])">

класс компонента:

    actionsByElements = new Map<HTMLElement, Subscription>();

    delayAction(element: HTMLElement, cb: Function, args: any[]) {
      // cancel countdown by element
      let action = this.actionsByElements.get(element);
      if(action) {
        action.unsubscribe();
      }

      // start new countdown by element
      action = timer(1000).subscribe(() => cb.apply(this, args));
      this.actionsByElements.set(element, action);
    }

    doSomething(){...}