网站导航下拉菜单切换延迟功能实现技术求助

首先明确：不要尝试编写syncWait这类同步等待函数。JavaScript是单线程运行模型，同步等待会直接阻塞浏览器主线程，导致页面完全冻结，用户无法进行任何操作，这绝对不可取。你需要用异步的setTimeout实现延迟逻辑，核心是管理好定时器的创建与清除，避免冲突。

以下是符合你需求的jQuery代码实现：

// 给每个导航项绑定mouseenter和mouseleave事件
$("ul#subnav-container li").on({
  mouseenter: function() {
    var $currentItem = $(this);
    
    // 清除当前项的隐藏定时器（用户离开后快速返回时，避免菜单被意外关闭）
    clearTimeout($currentItem.data('hideTimer'));
    
    // 清除其他所有项的显示定时器，防止多个菜单同时触发显示
    $("ul#subnav-container li").not($currentItem).each(function() {
      clearTimeout($(this).data('showTimer'));
    });
    
    // 设置1秒延迟后激活当前菜单
    var showTimer = setTimeout(function() {
      // 避免重复添加active类
      if (!$currentItem.hasClass('active')) {
        // 关闭其他已激活的菜单
        $("ul#subnav-container li.active").removeClass("active");
        $currentItem.addClass("active");
      }
    }, 1000);
    // 将定时器ID存在当前项的data中，方便后续清除
    $currentItem.data('showTimer', showTimer);
  },
  mouseleave: function() {
    var $currentItem = $(this);
    
    // 清除当前项的显示定时器（用户刚hover进来就离开时，避免菜单被意外打开）
    clearTimeout($currentItem.data('showTimer'));
    
    // 设置1秒延迟后关闭当前菜单
    var hideTimer = setTimeout(function() {
      $currentItem.removeClass("active");
    }, 1000);
    // 将定时器ID存在当前项的data中
    $currentItem.data('hideTimer', hideTimer);
  }
});

逻辑说明 #

• 当用户hover到某个导航项时：
  1. 清除该项目之前可能存在的「隐藏定时器」，避免刚返回就触发关闭；
  2. 清除其他所有导航项的「显示定时器」，防止多个菜单同时准备显示；
  3. 启动1秒的「显示定时器」，时间到后关闭其他菜单并激活当前项。
• 当用户离开某个导航项时：
  1. 清除该项目的「显示定时器」，避免刚离开就触发打开；
  2. 启动1秒的「隐藏定时器」，时间到后关闭当前菜单。

匹配你的需求场景 #

• 从A滑到B时：A启动隐藏定时器（1秒后关闭），B启动显示定时器（1秒后打开）；
• 如果1秒内从B滑回A：B的显示定时器被清除，A的隐藏定时器被清除，A的菜单保持打开；
• 如果1秒后仍停留在B：A的菜单关闭，B的菜单打开。

内容的提问来源于stack exchange，提问作者Garry J