在前端开发中，我们经常使用 jQuery 的 .hover() 方法来添加鼠标悬停事件。然而，有些情况下我们希望延迟执行这个事件，比如当用户快速划过一个元素时，我们希望等待一段时间再触发 .hover() 事件，以避免出现不必要的响应。
解决方案
为了实现这一目的，我们可以使用两种方法：setTimeout 和 debounce。
使用 setTimeout
setTimeout 是一种很容易理解和实现的方法。我们可以在 .hover() 事件处理函数中加入一个定时器，来延迟执行该函数。例如：
$('.element').hover(function() {
var $this = $(this);
setTimeout(function() {
if ($this.is(':hover')) {
// 鼠标仍然在元素内，执行事件的代码
}
}, 500); // 500 ms 延迟执行
});上述代码中，我们设置了一个 500ms 的延迟执行时间。当鼠标进入 .element 元素时，会启动一个定时器，500ms 后执行事件处理函数。如果在这 500ms 内，鼠标移出了元素，则事件处理函数不会被执行。
使用 debounce
debounce 是另一种常见的延迟执行方法。它可以使得函数在连续调用时只执行最后一次调用，从而达到减少函数执行次数的目的。这对于一些需要频繁调用的事件处理函数，比如 window.resize 或者 window.scroll 等，非常有用。
我们可以使用一个 debounce 函数来包装 .hover() 事件处理函数。debounce 函数会返回一个新的函数，在一定时间内只执行最后一次调用。例如：
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ ---------- -
--- ------- - ----- ---- - ----------
--------------------
----- - --------------------- -
----------------- ------
-- -------
--
-
--------------------------------------- -
-- --------------
-- ------上述代码中，我们先定义了一个 debounce 函数，接受待包装的函数和延迟时间作为参数。当 .element 元素触发 .hover() 事件时，我们将 debounce 包装后的函数传递给它。这样就可以在鼠标进入和离开 .element 元素时都能正确地控制事件处理函数的执行。
总结
本文介绍了两种实现 jQuery .hover() 延迟执行的方法：使用 setTimeout 和 debounce。setTimeout 的实现简单直接，而 debounce 则更加灵活且可复用性更高。具体使用哪种方法要根据具体情况进行选择。希望本文能够帮助大家更好地理解和运用 .hover() 事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14945