大家好，我是漩涡蜗牛。前言：这几周一直在维护自己的基于React的开源播放器组件，自以为功能基本大同小异，却忽略了播放器一个很重要的功能：当鼠标悬停在视频播放界面时，在一定时间后，鼠标会消失，视频下方的控制栏也会隐藏，呈现视频的最大可视化。但鼠标轻轻一动，一切又恢复了正常。如果我用一个简单的gif来说明，如下：有点难，不是简单的移动到元素（比如video），让它执行消失鼠标和消失控制条后的操作2秒，因为一旦鼠标移动一点，就必须恢复到原来的状态。还好结合防抖的思路和自己的一些思考，实现了这个功能，并封装为工具功能，供大家使用。当然，也有不足的地方，还请大家提意见，我会根据大家的意见更新本博客。开始：如果你现在需要使用这个功能，你希望使用起来尽可能简单，满足你的使用需求。想了想，暴露4个参数给你是最合适的：element：你要操作的元素（比如上面gif中的div元素“我是视频”）secondsLaterDoFn：你要做什么操作在你设置的时间后（比如上面gif中的“鼠标消失，控制条消失”）seconds：你想要的时间，单位：ms（比如上面gif中我设置的时间是2000ms）reNormalFn:return到原来的操作（比如上面gif里面的控制条和鼠标回来了）那么，我们现在写一个函数，把这四个参数传入，传入的元素写两个监听事件，我们的cleartimer函数：functionHoverSD(element,secondsLaterDoFn,seconds,reNormalFn){vartimeout;varele=element,secondsLDF=secondsLaterDoFn,seconds=seconds,reNFn=reNormalFn;varclearTimer=function(){超时&&clearTimeout(超时);}this.secondsHoverEX=function(){ele.addEventListener('mousemove',rebuildTimer);ele.addEventListener('mouseleave',clearTimer);}}window.HoverSD=HoverSD;你也发现了，什么是rebuildTimer和clearTimer？不用担心。梳理一下思路：当鼠标移到这个元素上后，我们需要一个定时器，在设定的时间后进行操作。但是，我们在设定的时间内再次移动鼠标。这时候，我们需要清除之前设置的定时器，重新启动一个定时器，重新计时。这里的思路和防抖完全一样，所以我们初始的rebuildTimer如下：varrebuildTimer=function(){varcontext=this;var参数=参数；清除计时器（）；timeout=setTimeout(()=>{secondsLDF.apply(context,args);},secs);}的意思是当我们mousemove的时候，会执行rebuildTimer函数，在这个函数里面，timer会被controller清空，即每次运动后，重新计时并执行secondsLDF。但是我们传入的参数reNormalFn（即reNFn）并没有被使用。它用于恢复原始状态。我们可以在清除定时器之前直接插入它。varrebuildTimer=function(){varcontext=this;var参数=参数；reNFn.apply（上下文，参数）；清除计时器（）；timeout=setTimeout(()=>{secondsLDF.apply(context,args);},secs);}那么如果我们想在特定时间移除这个元素的监听事件怎么办呢？比如在React中，我们在componentDidMount中使用了它，而我们需要在componentWillUnmount中移除监听事件以防止内存占用，那么我们需要再写一个函数来移除事件：this.removeElemEventListener=function(){ele.removeEventListener('mousemove',rebuildTimer);ele.removeEventListener('mouseleave',clearTimer);}注意removeEventListener的参数必须和监听时的执行函数完全一致，不能有参数，没有参数，没有参数！！！，我一开始就是用参数的形式写的，怎么弄都弄不对。..现在把它封装成一个工具函数，放在npm上，直接安装。为了兼顾没有配置webpack的情况和低版本浏览器的情况，我们可以这样做：//allcodefunctionHoverSD(element,secondsLaterDoFn,seconds,reNormalFn){varele=element,secondsLDF=secondsLaterDoFn,seconds=seconds,reNFn=reNormalFn;varrebuildTimer=function(){varcontext=this;var参数=参数；reNFn.apply(上下文,args);清除计时器（）；timeout=setTimeout(()=>{secondsLDF.apply(context,args);},secs);}varclearTimer=function(){超时&&clearTimeout(超时);}this.secondsHoverEX=function(){ele.addEventListener('mousemove',rebuildTimer);ele.addEventListener('mouseleave',clearTimer);}this.removeElemEventListener=function(){ele.removeEventListener('mousemove',rebuildTimer);ele.removeEventListener('mouseleave',clearTimer);}}window.HoverSD=HoverSD;通过this.暴露主要的核心函数secondsHoverEX和removeElemEventListener，然后将这个函数暴露给windowglobal,safe安装后直接通过lethoversd=newwindow.HoverSD(elem,fn1,2000,fn2);hoversd.secondsHoverEX();//...//其他代码在这里//...hoversd.removeElemEventListener();您可以使用这篇文章并将其包含在我的个人博客中。以后我会致力于推出越来越多的文章和开源工具。如果有帮助，请给我一个star。谢谢各位高手！后记：非常感谢您阅读到最后。如果有朋友想提建议，欢迎来github/issue给我提建议，也可以直接在下方评论。我个人认为这个工具功能适用的场景还是蛮多的。如果对你有帮助，欢迎给本项目打个star。这个工具的使用我会在项目主页上做更详细的介绍。欢迎访问：github项目地址：https://github.com/vortesnail/hover-seconds-do当然希望大家多多支持我基于React的开源播放器组件：https://github.com/vortensail/qier-player下次见，再见~
