敲碎时间的人的个人专栏
上一篇

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

欢迎讨论。

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

X

欢迎加群学习交流

联系我们