如何在jQuery的.hover()方法中使用throttle节流处理？

核心改动无需引入额外节流工具，仅通过内置状态标记+清空动画队列即可解决之前节流后动画无法运行的问题：

jQuery(document).ready(function($){
  var $navTab = $('.nav-tab-parent');
  // hover节流标记
  let hoverLocked = false;
  // mousemove节流标记 可选性能优化
  let moveLocked = false;

  function moveNavTab(e) {
    if (moveLocked) return;
    moveLocked = true;
    // 16ms节流 对应60帧刷新率
    setTimeout(() => moveLocked = false, 16);
    TweenLite.to($navTab, 0.3, {
      css: {
        left: e.pageX,
        top: e.pageY
      }
    });
  }

  $(window).on('mousemove', moveNavTab);

  $(".toggle-bars").hover(
    function() {
      // 节流拦截
      if (hoverLocked) return;
      hoverLocked = true;
      // 冷却时长可根据实际动画总耗时调整
      setTimeout(() => hoverLocked = false, 500);
      
      // 清空之前的动画队列 避免堆积
      $(".nav-tab-parent").stop(true, true).animate({
        opacity: 1
      }).delay(10).animate({
        width: "36px",
        easing: "swing"
      });
      $(".nav-tab").html("MENU").stop(true, true).delay(350).animate({
        opacity: 1
      });
    }, function() {
      // 节流拦截
      if (hoverLocked) return;
      hoverLocked = true;
      setTimeout(() => hoverLocked = false, 500);
      
      $(".nav-tab").stop(true, true).animate({
        opacity: 0
      });
      $(".nav-tab-parent").stop(true, true).delay(150).animate({
        width: "0",
        opacity: 0,
        easing: "swing"
      });
    }
  );
});

关键逻辑说明 #

• 状态变量hoverLocked作为原生节流开关，触发hover时如果为true直接中断执行，避免短时间内多次触发
• 所有animate前添加.stop(true, true)，第一个参数清空当前元素所有未执行的动画队列，第二个参数直接将当前动画跳转到结束状态，彻底解决动画堆积导致的无响应问题
• 节流冷却时长可以根据你实际的动画总耗时自行调整，避免状态切换冲突

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