Eckig und entprellen

Aktualisiert für RC.5

Mit Winkel-2 können wir debounce mit RxJS Betreiber debounceTime() auf ein Formular-Steuerelement valueChanges beobachten:

import {Component}   from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable}  from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';

@Component({
  selector: 'my-app',
  template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
    <br>{{firstName}}`
})
export class AppComponent {
  firstName        = 'Name';
  firstNameControl = new FormControl();
  formCtrlSub: Subscription;
  resizeSub:   Subscription;
  ngOnInit() {
    //debounce keystroke events
    this.formCtrlSub = this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
    //throttle resize events
    this.resizeSub = Observable.fromEvent(window, 'resize')
      .throttleTime(200)
      .subscribe(e => {
        console.log('resize event', e);
        this.firstName += '*';  //change something to show it worked
      });
  }
  ngDoCheck() { console.log('change detection'); }
  ngOnDestroy() {
    this.formCtrlSub.unsubscribe();
    this.resizeSub  .unsubscribe();
  }
} 

Plunker

Den obigen code enthält auch ein Beispiel, wie Gas-Fenster resize-Ereignisse, wie gebeten, durch @albanx in einem Kommentar unten.

Obwohl der obige code ist wahrscheinlich die Winkel-Weg, es zu tun, es ist nicht effizient. Jeder Tastendruck und jede resize-Ereignis aus, obwohl Sie entprellten und gedrosselt, Ergebnisse im change detection ausgeführt. In anderen Worten, entprellung und die Drosselung nicht beeinflussen, wie oft ändern Sie die Erkennung läuft. (Ich fand eine GitHub Kommentar von Tobias Bosch, bestätigt dies.) Sie können dies sehen, wenn Sie führen Sie die plunker und sehen Sie, wie viele Male ngDoCheck() aufgerufen wird, wenn Sie geben in das Eingabefeld ein, oder ändern Sie die Größe der Fenster. (Verwenden Sie die Blaue "x" - Taste, um führen Sie die plunker in einem separaten Fenster zu sehen, die auf resize-Ereignisse.)

Ein effizienteres Verfahren ist das erstellen RxJS Observablen selbst von den Ereignissen, die außerhalb der Eckigen "zone". Auf diese Weise, ändern Sie die Erkennung nicht jedes mal aufgerufen, wenn ein Ereignis ausgelöst wird. Dann, in Ihrem subscribe callback-Methoden, manuell trigger-change-detection – D. H., die du kontrollierst, wenn die änderungserkennung ist genannt:

import {Component, NgZone, ChangeDetectorRef, ApplicationRef, 
        ViewChild, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';

@Component({
  selector: 'my-app',
  template: `<input #input type=text [value]="firstName">
    <br>{{firstName}}`
})
export class AppComponent {
  firstName = 'Name';
  keyupSub:  Subscription;
  resizeSub: Subscription;
  @ViewChild('input') inputElRef: ElementRef;
  constructor(private ngzone: NgZone, private cdref: ChangeDetectorRef,
    private appref: ApplicationRef) {}
  ngAfterViewInit() {
    this.ngzone.runOutsideAngular( () => {
      this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
        .debounceTime(1000)
        .subscribe(keyboardEvent => {
          this.firstName = keyboardEvent.target.value;
          this.cdref.detectChanges();
        });
      this.resizeSub = Observable.fromEvent(window, 'resize')
        .throttleTime(200)
        .subscribe(e => {
          console.log('resize event', e);
          this.firstName += '*';  //change something to show it worked
          this.cdref.detectChanges();
        });
    });
  }
  ngDoCheck() { console.log('cd'); }
  ngOnDestroy() {
    this.keyupSub .unsubscribe();
    this.resizeSub.unsubscribe();
  }
} 

Plunker

Benutze ich ngAfterViewInit() statt ngOnInit() um sicherzustellen, dass inputElRef definiert ist.

detectChanges() ausgeführt werden (change detection) auf dieser Komponente und Ihre Kinder. Wenn Sie lieber laufen (change detection) von der root-Komponente (D. H., führen Sie eine vollständige change detection-check), dann verwenden Sie ApplicationRef.tick() statt. (Ich habe einen Aufruf ApplicationRef.tick() in den Kommentaren in der plunker.) Beachten Sie, dass der Aufruf tick() verursachen ngDoCheck() genannt zu werden.

InformationsquelleAutor der Antwort Mark Rajcok

Nicht direkt zugänglich sind, wie in angular1 aber Sie können ganz einfach spielen mit NgFormControl und RxJS observablen:

<input type="text" [ngFormControl]="term"/>

this.items = this.term.valueChanges
  .debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => this.wikipediaService.search(term));

Diesem blog-post erklärt es ganz deutlich:
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Hier ist es für eine AutoVervollständigen-aber es funktioniert in allen Szenarien.

InformationsquelleAutor der Antwort bertrandg

Für jeden, lodash, es ist extrem einfach zu debounce jede Funktion:

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

dann nur werfen Sie etwas wie dies in Ihrer Vorlage ein:

<input [ngModel]="firstName" (ngModelChange)="changed()" />

InformationsquelleAutor der Antwort br4d

Ich löste dies durch das schreiben einer debounce-Dekorateur. Das beschriebene problem konnte gelöst werden, indem die @debounceAccessor das Eigentum der set-accessor.

Hab ich auch geliefert, eine zusätzliche debounce-decorator für die Methoden, die nützlich sein können für andere Anlässe.

Dies macht es sehr einfach zu debounce eine Eigenschaft oder eine Methode. Der parameter ist die Anzahl der Millisekunden, die die debounce dauern sollte, 100 ms im Beispiel unten.

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


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

Und hier ist der code für die Dekorateure:

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);
    }
  }
}

Ich einen zusätzlichen parameter für die Methode Dekorator, welche das auslösen der Methode, NACH der debounce delay. Ich habe, so könnte ich zum Beispiel verwenden, wenn gepaart mit mouseover oder resize-Ereignisse, wo ich wollte, dass die Erfassung auftreten, an das Ende der event-stream. In diesem Fall ist das Verfahren jedoch nicht einen Wert zurückgeben.

InformationsquelleAutor der Antwort Fredrik_Macrobond

Einfache Lösung wäre eine Richtlinie, die Sie anwenden können, um jede Kontrolle.

import { Directive, ElementRef, Input, Renderer, HostListener, Output, EventEmitter } from '@angular/core';
import { NgControl } from '@angular/forms';

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

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


    private modelValue = null;

    constructor(public model: NgControl, el: ElementRef, renderer: Renderer)
    {

    }


    ngOnInit()
    {
         this.modelValue = this.model.value;

         if (!this.modelValue)
         {
            var firstChangeSubs = this.model.valueChanges.subscribe(v =>
            {
               this.modelValue = v;
               firstChangeSubs.unsubscribe()
            });
        }



        this.model.valueChanges
            .debounceTime(this.debounceTime)
            .distinctUntilChanged()
            .subscribe(mv =>
            {
                if (this.modelValue != mv)
                {
                    this.modelValue = mv;
                    this.onDebounce.emit(mv);
                }


            });
    }
}

Verwendung wäre

<textarea [ngModel]="somevalue"   
          [debounce]="2000"
          (onDebounce)="somevalue = $event"                               
          rows="3">
</textarea>

InformationsquelleAutor der Antwort Ashg

Dies ist die beste Lösung, die ich gefunden habe bis jetzt. Updates der ngModelauf blur und debounce

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);
        });
    }
}

als entlehnt aus https://stackoverflow.com/a/47823960/3955513

Dann in HTML:

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

Auf blur das Modell ist explizit aktualisiert mit plain javascript.

Beispiel hier: https://stackblitz.com/edit/ng2-debounce-working

InformationsquelleAutor der Antwort Shyamal Parikh