Question

我是角度2的新手。我有一个绑定到用户交互的值，我需要通过http请求发送此值。我在值更改时触发了一个事件，但该值每秒可以更改多次。我想限制http请求：用户交互时每2秒1次。我不想在没有交互时发送http请求。所以我想用计时器或间隔来做，但我不知道angular2的方式：

onChange() {

  if(_interval.timerFinished) {
      http.get(.............);
      _interval.launchTimer(2000); //2 seconds
  }

}

也许使用这个：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/interval.md

Answer 1

debounce

怎么样？

您也可以尝试Sample或ThrottleFirst。

http://reactivex.io/documentation/operators/sample.html

http.get(.............).debounce(2000)

Answer 2

我想限制http请求

为此，您可以通过添加html元素来绑定元素：

[(ngModel)] = "searchQuery" [ngFormControl]="searchQueryControl"

然后在你的代码中：

// Remember to import these things:
import {FORM_DIRECTIVES, Control} from 'angular2/common';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

constructor ( ... ) {
    //...
    this.searchQuery = '';
    this.searchQueryControl = new Control();
    //...

    this.searchQueryControl
        .valueChanges
        .debounceTime(1000)
        .distinctUntilChanged()
        .subscribe(text => {

            if(text !== '') {
              this.searchQuery = text;

              // Do whatever you want with the text
            }
      });

    //...
}

通过这样做，我们只会在输入更改（this.searchQueryControl.valueChanges）时运行代码，并且在1秒内没有发生另一次更改（.debounceTime(1000)）。如果值与上次运行的值不同，distinctUntilChanged()允许我们运行代码。因此，如果用户键入'asd'，点击退格键然后再次重新输入结尾'd'，则不会发生任何事情。

Angular2在一个时间间隔内没有Http请求

2 个答案: