setTimeout与onmouseout

问题描述

我正在尝试延迟获取“ onmouseout”功能。这样，当您移动鼠标时，视频会在几秒钟后返回到海报。以下代码可立即使您回到海报的onmouseout中。

<video class="content" 
    poster="/video/test.jpg"
    width="320" 
    height="240"  
    loop onmouseover="this.play()" 
    onmouseout="this.load();" >
        <source src="/video/test.mp4" type="video/mp4">
  </video>

以下代码是一个有效的示例，在onmouseout延迟后，我可以使某些东西工作：

 <video class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240"  
        loop onmouseover="this.play()" 
        onmouseout="myFunction();" >


        <script>
            function myFunction() {
              setTimeout(function(){ alert("Hello"); },3000);
            }
            </script>

<source src="/video/test.mp4" type="video/mp4">
</video>

如何在setTimeout中获取“ this.load”？

解决方法

setTimeout接受一个函数作为其第一个参数，因此您可以将this.load用作第一个参数，并在onmouseout属性中使用它，如下所示：

<video  class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240"  
        loop 
        onmouseover="this.play()" 
        onmouseout="setTimeout(this.load.bind(this),3000)" >
    <source src="/video/test.mp4" type="video/mp4">
</video>

edit：我有一个错误（对不起），我现在正在使用bind函数将视频元素绑定到load函数。 但是，这不是最佳方法，因为如果您使用onmouseout属性或任何其他附加事件的HTML属性，则只能附加一个onmouseout事件。在大多数情况下，您可能希望附加多个附件。因此，更好的解决方案是使用addEventListener方法：

HTML：

<video  id="content-video"
        class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240" >
    <source src="/video/test.mp4" type="video/mp4">
</video>

JS：

const video = document.getElementById("content-video");
video.addEventListener("mouseover",function() {
    video.play();
},false);
video.addEventListener("mouseout",function() {
    setTimeout(video.load.bind(video),3000);
},false);

edit：对于这些错误，我感到非常抱歉。我修复了它们，现在可以正常工作。