Làm thế nào để tạo đồng hồ đếm ngược với RxJS Observables?

Question

Tôi đang cố gắng để tạo ra một đồng hồ đếm ngược bằng cách sử dụng Observables, các ví dụ tại http://reactivex.io/documentation/operators/timer.html dường như không hoạt động. Trong ví dụ cụ thể này, lỗi liên quan đến timerInterval không phải là một hàm của Observable được trả về từ bộ đếm thời gian.

Tôi cũng đã được thử nghiệm với các cách tiếp cận khác và tốt nhất mà tôi đã đưa ra là:

Observable.interval(1000).take(10).subscribe(x => console.log(x)); 

Vấn đề ở đây là nó đếm lên 0-10 và tôi muốn có một đồng hồ đếm ngược ví dụ 10,9,8 ... 0.

Tôi cũng đã thử điều này nhưng timer không tồn tại cho loại Quan sát

Observable.range(10, 0).timer(1000).subscribe(x => console.log(x)); 

Cũng như, trong đó sản xuất không có đầu ra ở tất cả.

Observable.range(10, 0).debounceTime(1000).subscribe(x => console.log(x)); 

Để làm rõ tôi cần giúp đỡ thực hiện RxJS ReactiveX, chứ không phải phiên bản MircoSoft.

Answer 1

Bạn đã đi đúng hướng - vấn đề của bạn là timer không tồn tại trên nguyên mẫu (và do đó trên Observable.range()) nhưng trên Quan sát (xem RxJS docs). I E. jsbin

const start = 10; 
Rx.Observable 
    .timer(100, 100) // timer(firstValueDelay, intervalBetweenValues) 
    .map(i => start - i) 
    .take(start + 1) 
    .subscribe(i => console.log(i)); 

// or 
Rx.Observable 
    .range(0, start + 1) 
    .map(i => start - i) 
    .subscribe(i => console.log(i)); 

Answer 2

Với khoảng thời gian, cho phép bạn xác định bao lâu một giây là

const time = 5 // 5 seconds var timer$ = Rx.Observable.interval(1000) // 1000 = 1 second timer$ .take(time) .map((v)=>(time-1)-v) // to reach zero .subscribe((v)=>console.log('Countdown', v))