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这个操作符,如果不理解可以查看我写的这篇笔记

欢迎讨论。

版权声明:著作权归作者所有。

相关推荐

Java 9 Stream新增方法takeWhile的bug

Java 9的Stream新增方法takeWile():允许我们返回Stream里满足条件的前面部分元素。如:String[] arr= {"a", "b", "c","d"}; Arrays.stream(arr)     &n

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归