Javascript 隐藏覆盖一段时间后，就像标准的视频播放器

我正在制作一个自定义视频播放器，其中有一个包含视频播放器控件的覆盖

我的球员开始在全长和高度上工作

现在，我想在5秒钟后隐藏覆盖层，我将鼠标停在上面

现在的问题是，当调用下面的函数mouse over in.ts文件时，计时器的同步会受到影响

因此，如果我连续移动鼠标，覆盖层开始闪烁

请给我提供这个问题的解决办法

下面是我的html代码

<div class="video-container" #videoFullscreen>
    <div class="video-wrapper" mouse-move>
      <video class="video video-js" data-dashjs-player  id="myVideo"  autoplay #videoPlayer>
        <source src="{{ videoSource }}" type="video/mp4" />
      </video>


      <!-- overlay -->
      <div class="overlay" [class.hideOverlay]="hideTop">  
        <!-- top controls  -->
          .
          .
          <!-- lower controls  -->

        </div>
      </div>

这是我的css代码：

.overlay {
    display: flex;
}
.hideOverlay {
    display:none;
}

---

请帮我解决这个问题。

一个简单的解决方案是使用rxjs来解决这个问题，如下所示：

ngOnInit(): void {
    fromEvent<MouseEvent>(document, 'mousemove').pipe(tap(() => {
      console.log("show it!");
      this.hideTop = false
    }), switchMap((event) =>
      timer(5000).pipe(tap(() => {
        console.log("hideit");
        this.hideTop = true;
      }))
    )).subscribe();
  }

ngOnInit（）：void{
fromEvent（文档“mousemove”）.pipe（点击（（）=>{
log（“显示它！”）；
this.hideTop=false
})，开关映射（（事件）=>
计时器（5000）。管道（龙头（（）=>{
控制台日志（“hideit”）；
this.hideTop=true；
}))
)).subscribe（）；
}

如果您的组件被破坏，不要忘记取消订阅，以防止内存泄漏

首先，我们从

文档

mousemove

事件中创建一个

可观察的

。 现在，如果事件触发，我们将

hideTop

设置为true。

---

下面是有趣的部分：我们使用

开关映射

和

计时器

可观察

switchMap

如果外部的

Observable

发出新值，则会自动取消订阅内部的

Observable

。因此，只有在用户实际停止移动鼠标5秒钟后，内部的

可观察的
才会发出
 存储上次悬停时间并与之比较

private lastHover = 0;
@HostListener(...)
onMouseMove($event) {
    this.lastHover = new Date().getTime()
    This.hideTop = true;
    setTimeout( () => {
        ...
        if(lastHover + 5000 < new Date().getTime()) {
            This.hideTop = true;
        }
    }, 5000)
}

private lastHover=0；
@主机侦听器（…）
onMouseMove（$event）{
this.lasthhover=new Date（）.getTime（）文件
This.hideTop=true；
设置超时（（）=>{
...
如果（lastHover+5000<新日期（）.getTime（））{
This.hideTop=true；
}
}, 5000)
}
很抱歉，我的答案是jQuery，但这个概念相当基本

我们需要做的是检查超时事件是否已经触发，并在此期间在mousemove事件上重置它。这是通过检查是否应用了用于隐藏元素的类来实现的


//Timer variable
var timer;
//Detect mousemove event on parent element
$("html").on("mousemove", "#outer", function() {

//Is the element already hidden?
  if ($("#inner").hasClass("hide")) {
  //Show the element
    $("#inner").removeClass("hide")
  } else {
  //Reset the timer to 5 seconds
    clearTimeout(timer);
    timer = setTimeout(hideBox, 5000);
  }
})


function hideBox() {
  $("#inner").addClass("hide")
}


您需要将jQuery事件处理程序和元素目标替换为与您的TypeScript库等效的元素
有什么乐趣吗？是的，问题解决了..谢谢

//Timer variable
var timer;
//Detect mousemove event on parent element
$("html").on("mousemove", "#outer", function() {

//Is the element already hidden?
  if ($("#inner").hasClass("hide")) {
  //Show the element
    $("#inner").removeClass("hide")
  } else {
  //Reset the timer to 5 seconds
    clearTimeout(timer);
    timer = setTimeout(hideBox, 5000);
  }
})


function hideBox() {
  $("#inner").addClass("hide")
}