RxJS判断界面角色是否有移动

每隔一定时间检查界面，如果界面停止了一定次数，则判定为不移动。

let stop$ = interval(5000).pipe(
  map(_ => {
      // 返回指定坐标点的颜色，这里直接简单返回3个颜色
      return ['#fff', '#ddd', '#000']
  },
  // 传递上一个的值和本次的值
  pairwise(),
  concatMap(v => {
    // 将旧值和新值进行对比，相同的个数达到2个的话则为不移动
    return zip(from(v[0]), from(v[1])).pipe(
      filter(v => v[0] == v[1]),
      toArray(),
      map(v => v.length >= 2),
      tap(v => console.log('same color >= 2 ? ', v)）
    )
  },
  // true的话即为不移动，累加不移动的次数。值为false说明有了移动，重置为0
  scan((acc, cur) => {
    if (cur) {
      return acc+1
    } else {
      return 0
    }
  }, 0),
  // 判断不移动的次数是否达到3次
  map(v => v >= 3),
  // 将stop$进行多播
  share()
)

// 订阅这个流
stop$.subscribe()

可以看到使用RxJS来实现的时候，不会引入外部变量等副作用，逻辑清晰，维护和复用都非常容易。