javascript - 防止 Javascript 函数多次触发

Question

jsFiddle
我使用了一个自定义的下拉菜单，它在 jquery 事件和动画上运行。
当我通过 mouseenter 多次激活下拉菜单时会出现问题，这导致菜单向下滑动然后向上滑动几次。我尝试通过添加 .stop(true) 来修复它，这很成功，但它导致了类似这样的其他问题。 我遵循了该建议（此处为 jsFiddle），但它会导致更多没有吸引力的问题。

我需要一种方法来阻止函数冗余触发，但如果用户触发 .mouseleave 我仍然能够立即停止“向下滑动”然后“向上滑动”

我与自定义队列纠缠了 5 个小时，没有成功:(
欢迎任何想法、建议和批评。

Answer 1

基本上它归结为延迟事件处理程序的执行。

var mouseoverTimer = null;    

$('.elem').mouseover(function(){

   clearTimeout(mouseoverTimer); //ignore previous trigger

   mouseoverTimer  = setTimeout(function(){ //wait to execute handler again
     //execute actual handler here
   }, 10);
});

如果在指定的时间间隔内调用了相同的处理程序，则挂起的执行将被取消并再次排队等待 10 毫秒后执行，希望在该时间间隔内没有后续触发器。