智能计数器

一个在页面上带有动态更新数字效果的有趣元素就是智能计数器，也可以称之为里程表效果。不采用上下跳数的方式，而是快速地清点到期望的数字，这能达到一种很酷的效果。能做到这点的流行库的其中一个就是由 Hubspot 所写的 odometer 。让我们来看看如何使用短短几行 RxJS 代码来实现类似的效果。

智能计数器 - 图1

原生 JS

( JSBin |
JSFiddle )

  1. // 工具函数
  2. const takeUntilFunc = (endRange, currentNumber) => {
  3.   return endRange > currentNumber
  4.     ? val => val <= endRange
  5.     : val => val >= endRange;
  6. };
  8. const positiveOrNegative = (endRange, currentNumber) => {
  9.   return endRange > currentNumber ? 1 : -1;
  10. };
  12. const updateHTML = id => val => (document.getElementById(id).innerHTML = val);
  13. // 显示
  14. const input = document.getElementById('range');
  15. const updateButton = document.getElementById('update');
  17. const subscription = (function(currentNumber) {
  18.   return fromEvent(updateButton, 'click').pipe(
  19.     map(_ => parseInt(input.value)),
  20.     switchMap(endRange => {
  21.       return timer(0, 20).pipe(
  22.         mapTo(positiveOrNegative(endRange, currentNumber)),
  23.         startWith(currentNumber),
  24.         scan((acc, curr) => acc + curr),
  25.         takeWhile(takeUntilFunc(endRange, currentNumber));
  26.       )
  27.     }),
  28.     tap(v => (currentNumber = v)),
  29.     startWith(currentNumber)
  30.   )
  31.   .subscribe(updateHTML('display'));
  32. })(0);
HTML
  1. <input id="range" type="number">
  2. <button id="update">Update</button>
  3. <h3 id="display">0</h3>

我们可以轻易地获取我们的原生 JS 所写的智能计数器并将其包装在任何流行的基于 UI 库中。下面是 Angular 版本的智能计数器，它接收一个更新结束范围的 Input 输入属性并执行适当的转换。

Angular 版本

(
StackBlitz
)

  1. import { Component, Input, OnDestroy } from '@angular/core';
  2. import { Subject } from 'rxjs/Subject';
  3. import { timer } from 'rxjs/observable/timer';
  4. import { switchMap, startWith, scan, takeWhile, takeUntil, mapTo } from 'rxjs/operators';
  6. @Component({
  7.   selector: 'number-tracker',
  8.   template: `
  9.     <h3> {{ currentNumber }}</h3>
  10.   `
  11. })
  12. export class NumberTrackerComponent implements OnDestroy {
  13.   @Input()
  14.   set end(endRange: number) {
  15.     this._counterSub$.next(endRange);
  16.   }
  17.   @Input() countInterval = 20;
  18.   public currentNumber = 0;
  19.   private _counterSub$ = new Subject();
  20.   private _onDestroy$ = new Subject();
  22.   constructor() {
  23.     this._counterSub$
  24.       .pipe(
  25.         switchMap(endRange => {
  26.           return timer(0, this.countInterval).pipe(
  27.             mapTo(this.positiveOrNegative(endRange, this.currentNumber)),
  28.             startWith(this.currentNumber),
  29.             scan((acc: number, curr: number) => acc + curr),
  30.             takeWhile(this.isApproachingRange(endRange, this.currentNumber))
  31.           )
  32.         }),
  33.         takeUntil(this._onDestroy$)
  34.       )
  35.       .subscribe((val: number) => this.currentNumber = val);
  36.   }
  38.   private positiveOrNegative(endRange, currentNumber) {
  39.     return endRange > currentNumber ? 1 : -1;
  40.   }
  42.   private isApproachingRange(endRange, currentNumber) {
  43.     return endRange > currentNumber
  44.       ? val => val <= endRange
  45.       : val => val >= endRange;
  46.   }
  48.   ngOnDestroy() {
  49.     this._onDestroy$.next();
  50.     this._onDestroy$.complete();
  51.   }
  52. }
HTML
  1. <p>
  2.   <input type="number"
  3.     (keyup.enter)="counterNumber = vanillaInput.value"
  4.     #vanillaInput>
  5.   <button
  6.     (click)="counterNumber = vanillaInput.value">
  7.     Update number
  8.   </button>
  9. </p>
  10. <number-tracker [end]="counterNumber"></number-tracker>

使用到的操作符