为什么Jquery offset（）在多次点击时多次触发[重复]答案

【问题标题】：why Jquery offset() fires multiple times on multiple click [duplicate]为什么Jquery offset（）在多次点击时多次触发[重复]
【发布时间】：2021-08-28 02:09:22
【问题描述】：

我有一个导航栏，可以导航到某个区块。当我在按钮上单击几次时，在滚动到正确的 div 后，当我尝试自己向上滚动时，滚动事件表单导航栏将我滚动到 div 的时间与我单击导航项的时间一样多。

   function goToByScroll(id) {
        closeSidebar();
        const elem = $("body").find(`[data-el=${id}]`);
        $('html, body').animate({
            scrollTop: $(elem).offset().top
        }, 600);
        return false;
    }
  $("#mySidenav > a, #mySidenavMob > a, a").click(function (e) {
        // e.preventDefault();
        const dataAtrr = $(this).attr("data-id");
        if (dataAtrr) goToByScroll(dataAtrr);
    });

我应该如何避免这种情况？

【问题讨论】：

你应该设置一个动画正在进行的标志并在closeSidebar()之前检查它，如果为真则立即返回，如果为假，则将其设置为真。然后在回调中将其设置为 false，您可以传入 animate 方法，该方法将在 animation is complete 时调用。
@MatJ 不需要标志，jquery 已经内置了它：if ($("body").is(":animated")) return;（或者，也许更好，用.finish() 取消之前的动画）
@freedomn-m，从来不知道。谢谢
@MatJ 别担心，我们使用我们所知道的
真的感谢大家 if ($("body").is(":animated")) return;工作

标签： javascript html jquery

【解决方案1】：

其中一个决定是为我添加超时，但我不确定这是正确的方式

 function goToByScroll(id, link) {
        closeSidebar();
        link.css("pointer-events", "none");
        setTimeout(() => {
            link.css("pointer-events", "all");
        }, 650)
        const elem = $("body").find(`[data-el=${id}]`);
        $('html, body').animate({
            scrollTop: $(elem).offset().top
        }, 600);
        return false;
    }

【讨论】：

jquery 'animate' 有一个回调 complete 仅适用于这种情况 - 将您的指针事件全部添加到 animate 函数的回调中。
另外请注意，您只是禁用了导致第一个动画的一个链接。鉴于您的事件处理程序目标$("#mySidenav > a, #mySidenavMob > a, a")，可能有不止一个链接可以启动goToByScroll，但您只需禁用启动它的一个。如果你要走这条路而不是.is(":animated")，你应该这样做$("#mySidenav > a, #mySidenavMob > a, a").css("pointer-events", "none")（等）