javascript - Jquery下拉菜单鼠标输入延迟

Question

所以我有一个带有 jquery 的下拉菜单，它使用上下滑动功能。

$(document).ready(function(){
    $('#menu>li').mouseenter(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
    $('#menu>li').mouseleave(function(){
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});

我怎样才能使我的 mouseleave 函数执行后有一段延迟才能再次注册 mouseenter 函数？

提前致谢!

Answer 1

声明一个初始超时为 0 的变量，一旦它进入 mouseleave 函数，将其更新为您想要延迟的值。

编辑
使用 clearTimeout 清除之前创建的超时。

$(document).ready(function(){
    var delay=0;
    var timeout;
    $('#menu>li').mouseenter(function(){
      timeout= setTimeout(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
      },delay);
    });
    $('#menu>li').mouseleave(function(){
        if(typeof timeout!=='undefined'){
          clearTimeout(timeout);
        }
        delay=250;
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});