Angular 当鼠标离开元素x毫秒时隐藏元素

我正在努力创造这个可观察的东西。我的

Angular

应用程序中有一个可隐藏的元素。当用户将鼠标放在该元素上离开时，如果在500毫秒内没有输入，则该元素应隐藏

大理石图：

onleave --x-------x------------------------>
onenter -----x----------------------------->
                  <--500ms-->
_________________________________________
hide    ---------------------x------------->

编辑：

我已经创建了一个observable，但它没有按照我希望的方式工作：

const leave$ = fromEvent(this.backgroundSelector.nativeElement, "mouseleave");
const enter$ = fromEvent(this.backgroundSelector.nativeElement, "mouseenter");

const hide$ = leave$.pipe(
      mergeMap(event =>
          of(event).pipe(
                delay(500),
                takeUntil(enter$)
          )
      )
);

hide$.pipe(takeUntil(this.destroy$)).subscribe(_ => this.hideSelector());

---

问题是，只有当我在500毫秒后用鼠标光标返回时，元素才会隐藏。

您可以在mouseleave事件上使用debounceTime操作符。作为

DebounceTime放弃所用时间小于指定值的发射值 输出间隔时间

在mouseenter事件中，您需要放弃mouseleave事件中发出的值。对于这种情况，您可以使用简单的运算符，它将丢弃内部可观察发射值

const main = document.getElementById('main');
const content = document.getElementById('content');    

 fromEvent(main, 'mouseenter')
 .pipe(   
   switchMap(event => {
     content.style.display = 'block';
     return fromEvent(main, 'mouseleave').pipe(debounceTime(500));
   }))
 .subscribe(val => {
  content.style.display = 'none';
});

下面是一个例子

const main = document.getElementById('main');
const content = document.getElementById('content');    

 fromEvent(main, 'mouseenter')
 .pipe(   
   switchMap(event => {
     content.style.display = 'block';
     return fromEvent(main, 'mouseleave').pipe(debounceTime(500));
   }))
 .subscribe(val => {
  content.style.display = 'none';
});