javascript - 如何在angular2中使用 ‘Rx Observable’解决双击问题

Question

let button = document.querySelector('.mbtn');
let lab = document.querySelector('.mlab');

let clickStream = Observable.fromEvent(button,'click');

let doubleClickStream = clickStream 
        .buffer(()=> clickStream.throttle(250))
        .map(arr => arr.length)
        .filter(len => len === 2); 

doubleClickStream.subscribe(event =>{
        lab.textContent = 'double click';
}); 

    doubleClickStream.throttle(1000)
        .subscribe(suggestion =>{
            lab.textContent = '-';
        });

但是这是我的angular2项目中的错误，谁能帮我解决一下，这是错误日志↓

ERROR in /Users/genilex3/Desktop/meager/angularRxjs/angularrxjs/src/app/app.component.ts (58,15): Argument of type '() => any' is not assignable to parameter of type 'Observable'. Property '_isScalar' is missing in type '() => any'.

ERROR in /Users/genilex3/Desktop/meager/angularRxjs/angularrxjs/src/app/app.component.ts (58,41): Argument of type 'number' is not assignable to parameter of type '(value: {}) => SubscribableOrPromise'.

Answer 1

你应该为你的流使用 bufferTime。

let doubleClickStream = clickStream 
      .bufferTime(250)
      .map(arr => arr.length)
      .filter(len => len === 2);

在这里你可以阅读更多:http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime

如果你想在设置后 1000 毫秒后清除你的值，你应该使用 debounceTime 方法。

doubleClickStream.debounceTime(1000)
    .subscribe(suggestion =>{
        lab.textContent = '-';
    });

在这里您可以阅读更多关于 debounceTime 的信息:http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime