这是我迄今为止找到的最好的解决办法。更新ngModelon的模糊和反弹

import { Directive, Input, Output, EventEmitter,ElementRef } from '@angular/core';
import { NgControl, NgModel } from '@angular/forms';
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';

@Directive({
    selector: '[ngModel][debounce]',
})
export class DebounceDirective {
    @Output()
    public onDebounce = new EventEmitter<any>();

    @Input('debounce')
    public debounceTime: number = 500;

    private isFirstChange: boolean = true;

    constructor(private elementRef: ElementRef, private model: NgModel) {
    }

    ngOnInit() {
        const eventStream = Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
            .map(() => {
                return this.model.value;
            })
            .debounceTime(this.debounceTime);

        this.model.viewToModelUpdate = () => {};

        eventStream.subscribe(input => {
            this.model.viewModel = input;
            this.model.update.emit(input);
        });
    }
}

引自https://stackoverflow.com/a/47823960/3955513

然后在HTML中:

<input [(ngModel)]="hero.name" 
        [debounce]="3000" 
        (blur)="hero.name = $event.target.value"
        (ngModelChange)="onChange()"
        placeholder="name">

在模糊模型是显式更新使用纯javascript。

例如:https://stackblitz.com/edit/ng2-debounce-working

对于任何使用lodash的人来说，撤销任何函数都非常容易:

changed = _.debounce(function() {
    console.log("name changed!");
}, 400);

然后在模板中添加如下内容:

<(input)="changed($event.target.value)" />

花了好几个小时在这上面，希望我能帮别人省点时间。对我来说，下面的方法对一个控件使用debounce更直观，更容易理解。它是建立在角上的。io文档解决方案的自动完成，但有能力为我拦截调用，而不必依赖于绑定数据到DOM。

砰砰作响

这种情况的一个用例场景可能是在输入用户名后检查用户名，看看是否有人已经使用了它，然后警告用户。

注意:不要忘记，(blur)="function(something.value)可能更适合你，这取决于你的需要。

如果你不想处理@angular/forms，你可以只使用RxJS Subject和变更绑定。

view.component.html

<input [ngModel]='model' (ngModelChange)='changed($event)' />

view.component.ts

import { Subject } from 'rxjs';
import { Component }   from '@angular/core';
import 'rxjs/add/operator/debounceTime';

export class ViewComponent {
    model: string;
    modelChanged: Subject<string> = new Subject<string>();

    constructor() {
        this.modelChanged
            .debounceTime(300) // wait 300ms after the last event before emitting last event
            .distinctUntilChanged() // only emit if value is different from previous value
            .subscribe(model => this.model = model);
    }

    changed(text: string) {
        this.modelChanged.next(text);
    }
}

这确实触发了变更检测。关于不触发变更检测的方法，请参阅Mark的回答。

更新

rxjs 6需要.pipe(debounceTime(300)， distinctUntilChanged())。

例子:

   constructor() {
        this.modelChanged.pipe(
            debounceTime(300), 
            distinctUntilChanged())
            .subscribe(model => this.model = model);
    }

由于这个话题已经很老了，大多数答案在Angular 6-13和/或使用其他库中都不起作用。 这里有一个简短的RxJS Angular 6+解决方案。

首先导入必要的东西:

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

实现ngOnInit和ngOnDestroy:

export class MyComponent implements OnInit, OnDestroy {
  public notesText: string;
  public notesModelChanged: Subject<string> = new Subject<string>();
  private notesModelChangeSubscription: Subscription

  constructor() { }

  ngOnInit() {
    this.notesModelChangeSubscription = this.notesModelChanged
      .pipe(
        debounceTime(2000),
        distinctUntilChanged()
      )
      .subscribe(newText => {
        this.notesText = newText;
        console.log(newText);
      });
  }

  ngOnDestroy() {
    this.notesModelChangeSubscription.unsubscribe();
  }
}

用这种方式:

<input [ngModel]='notesText' (ngModelChange)='notesModelChanged.next($event)' />

附注:对于更复杂和有效的解决方案，您可能仍然需要检查其他答案。

我通过编写一个debounce decorator来解决这个问题。所描述的问题可以通过将@debounceAccessor应用于属性的集访问器来解决。

我还为方法提供了一个额外的debounce装饰器，它可以在其他场合使用。

这使得撤消属性或方法变得非常容易。该参数是反弹应该持续的毫秒数，在下面的示例中为100毫秒。

@debounceAccessor(100)
set myProperty(value) {
  this._myProperty = value;
}


@debounceMethod(100)
myMethod (a, b, c) {
  let d = a + b + c;
  return d;
}

下面是装饰器的代码:

function debounceMethod(ms: number, applyAfterDebounceDelay = false) {

  let timeoutId;

  return function (target: Object, propName: string, descriptor: TypedPropertyDescriptor<any>) {
    let originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      if (timeoutId) return;
      timeoutId = window.setTimeout(() => {
        if (applyAfterDebounceDelay) {
          originalMethod.apply(this, args);
        }
        timeoutId = null;
      }, ms);

      if (!applyAfterDebounceDelay) {
        return originalMethod.apply(this, args);
      }
    }
  }
}

function debounceAccessor (ms: number) {

  let timeoutId;

  return function (target: Object, propName: string, descriptor: TypedPropertyDescriptor<any>) {
    let originalSetter = descriptor.set;
    descriptor.set = function (...args: any[]) {
      if (timeoutId) return;
      timeoutId = window.setTimeout(() => {
        timeoutId = null;
      }, ms);
      return originalSetter.apply(this, args);
    }
  }
}

我为方法装饰器添加了一个额外的参数，让你在debounce延迟后触发方法。我这样做是为了在与鼠标悬停或调整事件相结合时使用它，我希望捕获发生在事件流的末尾。但是，在这种情况下，该方法不会返回值。