RxJs——takeWhile

上一节我们学习了takeUntil这个运算符,今天我们来看看另一个类似的运算符takeWhile.

这个运算符的特点是：

这个运算符接收一个谓词函数，函数的参数收到的就是流对象的值，如果谓词函数返回true,则直接将此值传递给观察者，否则，取消对源Observable'的订阅，然后完成。

我们看看这个操作符的动态图：

我们来分析一下：

1、订阅源 observable

2、当一个新值从源 observable 到达时，执行谓词函数

3、如果函数返回真值，则将值发送给观察者

4、如果函数返回虚假值，则将值发送给观察者（如果操作符配置为包含），取消订阅源 observable 并向观察者发送完整通知

5、一旦源 observable 完成，将完成通知发送给观察者

6、如果源 observable 抛出错误，将错误通知发送给观察者

使用场景：

一旦某个值通过，takeWhile 可用于销毁链并释放资源。例如，您在鼠标进入框时订阅 mousemove 事件，并希望在鼠标离开框时取消订阅。

代码如下：

onst box = createBox();

fromEvent(box, 'mouseenter').pipe(
   exhaustMap(() => {
       // we're only interested in the mousemove event
       // as long as we're inside the box
       // once we leave the box, remove the listeners
       return fromEvent(box, 'mousemove').pipe(
           takeWhile((event: MouseEvent) => {
               return isEventInElement(
                   box.getClientRects(),
                   event.clientX,
                   event.clientY
               );
           })
       );
   })
).subscribe();

function isEventInElement(rect, clientX, clientY) {
   if (clientX < rect.left || clientX >= rect.right) return false;
   if (clientY < rect.top || clientY >= rect.bottom) return false;
   return true;
}

function createBox() {
   const box = document.createElement('div');

   box.style.backgroundColor = 'blue';
   box.style.position = 'fixed';
   box.style.top = '100px';
   box.style.left = '400px';
   box.style.width = '300px';
   box.style.height = '300px';

   document.body.appendChild(box);

   return box;
}

在这里，我们使用了exhaustMap这个操作符，如果不理解可以查看我写的这篇笔记

欢迎讨论。