仅尊重最新的一系列 javascript/jQuery 事件的最简单方法答案

【问题标题】：Simplest way to honor only the latest of a series of javascript/jQuery events仅尊重最新的一系列 javascript/jQuery 事件的最简单方法
【发布时间】：2011-06-24 18:46:56
【问题描述】：

我不得不想象这是 javascript/jQuery 的一个常见用例，所以如果它在网站上的其他地方，请原谅我，我搜索它并找不到这个基本用例。

我有一个可见的 div (A)。悬停该 div 会显示其他一些 div (B & C)。将这些 div（A、B 或 C）中的任何一个悬停都会隐藏显示的两个 div（B 和 C）。

够简单吧？问题在于，当您快速连续多次悬停和取消悬停时，这种简单的行为会导致丑陋，因为所有事件都会叠加，然后它就像手风琴一样有一段时间。

我尝试将 typewatch 函数带入方程：

var typewatch = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      }  
    })();

但我想我无法正确使用它（也许我必须调用一个调用 typewatch 本身的自定义切换函数，或者其他什么？）。

为了便于理解，这里是一个确切情况的 jsfiddle： http://jsfiddle.net/tchalvakspam/KG3P9/7/

但总的来说，我怎样才能捕捉多个事件而只尊重最新的事件？

【问题讨论】：

你没有使用 jQuery 的原生动画能力（更具体地说是.stop()），因为......
这东西编码不正确...离开 A...去 B 的时候，你是在手风琴（？）！
哎呀，是的，我意识到从 a 移动到 b 会导致问题，我应该在整个页脚容器上触发。
@brad 至于使用 animate 和 stop 作为替代方案，我想我可以尝试一下，当然，以前没有真正使用过 animate。
@josh.trow 好了，更新为仅通过页脚元素本身的 hover() 触发。

标签： javascript jquery last-modified typewatch

【解决方案1】：

我使用 e.preventDefault() 和 jQuery 事件来阻止事件向上传播。

【讨论】：

【解决方案2】：

这实际上是过去常常困扰我的事情。在制作动画之前，请致电 $.stop()，它会冻结任何当前动画，并继续执行您给它的新目标。

$("#container")
  .mouseenter(
    function(){
     $(".panels", this).stop(true, true).slideDown(); 
    })
  .mouseleave(
    function(){
     $(".panels", this).stop(true, true).slideUp();
    }
  );

这遵循 jQuery API 中为 $.stop() 方法本身提供的文档，因为它们提供了一个类似的示例，使用单个图像。

演示：http://jsbin.com/adeqef/2/edit

【讨论】：

当你在它上面挥动鼠标时并不完美，但它对于我当前的用例来说已经足够好了。
@Tchalvak 这绝对不是完美的，但它几乎就在那里；）
是的。在这里，我以为我手上有一个简单的用例……：p