angular - Angular 4，如何以 1 秒的延迟更新 [(ngModel)]

Question

由于 ngModel 正在立即更新如何延迟。

  <input type="text" value="{{item.task_name}}" name="task_name" [(ngModel)]="item.task_name" (ngModelChange)="update_fields([item.task_name])" >

我需要通过调用 update_fields() 将 task_name 保存一秒钟，以避免即时调用服务。

谢谢

Answer 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从链中获取最新的 observable，因此您不会一次获得多个结果

Answer 2

Fredrik Lundin 为 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;
    }
  }
}

Answer 3

很多解决方案都使用setTimeout()，但这会导致每次模型更改时都会调用该函数，防止这种情况的简单方法是先清除超时

例如

timeOut;
timeOutDuration = 1000;

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

这只会在最后一次更新完成并且timeOutDuration已经过去后调用该函数一次

Answer 4

update_fields(){

  this.service.yourTask(){
    .subscribe(data => {
      setTimeout(()=>{ //your task }, 4000)
    }    
  }
}


someFunction() {
    setTimeout(() => /* code to execute */, 3000)
}

Answer 5

update_fields()在您的方法中添加延迟。

像：

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

Answer 6

这是一个与回调一起使用的解决方案。

查看模板：

<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(){...}