jquery - 重复事件以及如何避免

Question

我的 jQuery 代码是：

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').slideToggle('fast');
    });
});

在工作：

http://jsfiddle.net/Reuben/Au7LA/1/

我的代码有效，但如果你不小心，你可以快速打开关闭面板。那么是否有延迟，或者更确切地说，有人可以做些什么来防止这种情况发生？

Answer 1

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').stop().slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').stop().slideToggle('fast');
    });
});

http://jsfiddle.net/Au7LA/3

也可能去抖插件对你有用http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html

---

更新（使用去抖动）：

$(document).ready(function () {
    var toggle = function (show) {
        return function () {
            var $el = $(this);
            var isHovered = $el.is(':hover');
            var animation = show && isHovered ? 'slideDown' : 'slideUp';
            $el.children('ul').stop()[animation]('fast');
        };
    }
    var mouseenter = $.debounce(400, toggle(true));
    var mouseleave = toggle(false);
    $('.selector')
        .on('mouseenter', mouseenter)
        .on('mouseleave', mouseleave);
});

http://jsfiddle.net/vpetrychuk/4C6CV/

Answer 2

你可以试试这个：

 $(document).ready(function () {
$('.selector').mouseenter(function () {
    $(this).find('> ul').hide().slideDown('fast');
});
$('.selector').mouseleave(function () {
    $(this).find('> ul').hide().slideUp('fast');
 });
});  

这个小提琴：http: //jsfiddle.net/Au7LA/5/