大家好，我是 vortesnail。

前言：

最近這幾個星期，一直都在維護自己的基于 React 的開源播放器組件，以為功能基本都差不多了，卻忽視了播放器一個很重要的功能：鼠標懸停在視頻播放界面時，在一定時間后鼠標會消失，視頻下方的控制欄也會隱藏，呈現視頻的最大可視化。但是鼠標稍微一動，一切恢復如初。用一張簡單的 gif 圖來說明的話，是下面這樣子的：

有點犯難，它不是簡單地移到元素（如視頻）上，2秒后讓它執行鼠標消失和控制欄消失的操作，因為一旦鼠標一動一點，都要恢復原樣，不過好在結合 防抖 的思想以及自己的一些思考，實現了這個功能，并將其封裝為一個工具函數，可供大家使用，當然，其中也有不足，也請各位能給予意見，我會結合給的意見更新這篇博客。

開始：

如果你現在需要使用這個功能，你希望用起來盡量簡單，并且能達到你的使用要求，思來想去，給你暴露 4 個參數最為妥當：

• element：你所希望操作的元素（比如上面 gif 中 “我是視頻”這個 div 元素）
• secondsLaterDoFn：你設定的時間之后，想做什么操作（比如上面 gif 中“鼠標消失，控制欄消失”）
• seconds：你希望的時間，單位：ms（比如上面 gif 中我設定的時間為 2000ms）
• reNormalFn：回歸原樣的操作（比如上面 gif 中控制欄和鼠標都回來）

那么，我們現在寫一個函數，把這四個參數傳進去，并對傳入的 element 寫兩個監聽事件，以及我們的清除定時器函數：

function HoverSD(element, secondsLaterDoFn, seconds, reNormalFn) {var timeout;var ele = element, secondsLDF = secondsLaterDoFn, secs = seconds, reNFn = reNormalFn;var clearTimer = function() {timeout && clearTimeout(timeout);}this.secondsHoverEX = function() {ele.addEventListener('mousemove', rebuildTimer);ele.addEventListener('mouseleave', clearTimer);} }window.HoverSD = HoverSD;

你也發現了， rebuildTimer 和 clearTimer 是個啥玩意兒？別急。
我們整理一下思路：在鼠標移到這個元素上面之后，我們要有一個定時器，在設定的時間過后，執行操作，但是，我們在設定的時間之內，又移動了鼠標，這時候需要把之前設定的定時器清除，重新開一個定時器，重新計時，這里的思想和 防抖 一模一樣，于是我們初步的 rebuildTimer 如下：

var rebuildTimer = function() {var context = this;var args = arguments;clearTimer();timeout = setTimeout(() => {secondsLDF.apply(context, args);}, secs); }

意思就是，當我們 mousemove 的時候，就會執行 rebuildTimer 函數，在這個函數內部，清除定時器，即每次移動之后，重新計時，執行 secondsLDF 。

可是我們傳入的參數 reNormalFn （即 reNFn ）并沒有用到啊，它是用來恢復原狀態的操作，我們直接插入在清除定時器之前就可以了。

var rebuildTimer = function() {var context = this;var args = arguments;reNFn.apply(context, args);clearTimer();timeout = setTimeout(() => {secondsLDF.apply(context, args);}, secs); }

那我們在特定的時候想要移出這個元素的監聽事件怎么辦呢？比如在 React 中我們在 componentDidMount 中用了，需要在 componentWillUnmount 中去除監聽事件，防止內存占用，那我們就需要再寫一個移除事件的函數：

this.removeElemEventListener = function() {ele.removeEventListener('mousemove', rebuildTimer);ele.removeEventListener('mouseleave', clearTimer); }

注意， removeEventListener 的參數，必須與監聽時候的執行函數完全相同，且 不能有參數，不能有參數，不能有參數！！！ ，我一開始就是寫的有參數形式，怎么搞都搞不對。。。

現在把它封裝成一個工具函數，放到 npm 上，直接安裝使用，為了兼顧在不配置 webpack 情況下以及低版本瀏覽器情況下，我們可以這樣來做：

// all code function HoverSD(element, secondsLaterDoFn, seconds, reNormalFn) {var timeout;var ele = element, secondsLDF = secondsLaterDoFn, secs = seconds, reNFn = reNormalFn;var rebuildTimer = function() {var context = this;var args = arguments;reNFn.apply(context, args);clearTimer();timeout = setTimeout(() => {secondsLDF.apply(context, args);}, secs);}var clearTimer = function() {timeout && clearTimeout(timeout);}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;

將主要的核心函數 secondsHoverEX 和 removeElemEventListener 通過 this. 暴露出來，再將這個函數暴露到 window 全局，安裝之后可以直接通過

let hoversd = new window.HoverSD(elem, fn1, 2000, fn2); hoversd.secondsHoverEX(); // ... // other code here // ... hoversd.removeElemEventListener();

即可完成使用。

本篇文章收錄于我的 blog，后續會致力于推出越來越多文章以及開源工具，如有幫助，賞個star，謝謝各位老爺了！

后記：

非常感謝大家能看到最后，如果有朋友想要提出意見，歡迎來 github/issue 給我提建議，也可在下方評論直接提出，我個人覺得這個工具函數適用的場景還是蠻多的，如果能幫助到你，歡迎來此項目下賞個 star 。我會在項目主頁關于此工具的使用做更詳細的介紹，歡迎訪問：
github項目地址：https://github.com/vortesnail/hover-seconds-do

當然，厚著臉皮也希望大家能支持下我的基于 React 的開源播放器組件：

vortesnail/qier-player?github.com

下次再見，拜拜啦～

總結

以上是生活随笔為你收集整理的setwindowshookex回调函数不执行_不一样的“悬停几秒后执行函数”？一个开源工具函数，请注意查收...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。