javascript - 如何防止 onclick 监听器的垃圾邮件？

Question

这对我来说是一个新问题，我一直无法找到关于它的任何信息。

我有一个简单的 onclick 监听器，可以平滑滚动到页面上的目标。这是下面的代码:

$(".nav-scroll").click(function (event) {
    var ID = this.hash;
    //has a few extra conditionals here specific to the page
    $('html,body').animate({ scrollTop: $(ID).offset().top }, 1000);
});

最终，场景是这个函数需要时间来执行。时间不多，但如果有人向页面上的链接发送垃圾邮件并且浏览器开始排队函数调用，它确实会增加。现在垃圾邮件是一种极端情况，但即使在连续点击 3 或 4 次之后，它也会阻碍用户体验，因为他们无法向下滚动页面，因为页面试图将他们滚动回目标 3 或 4 次。

我所有的研究都能够证明是检查一个窗口是否已经有一个事件监听器，就像在这里找到的:JavaScript - how to check if event already added或列出元素上的所有事件监听器，如下所示:jQuery find events handlers registered with an object ，但无需检查当前是否正在运行。

是否可以通过在执行之前或通过其他方法将所有先前的监听器调用转储到页面执行中期来防止这种副作用？或者这是 JavaScript 不提供的东西？如果是这样，是否有解决这个问题的策略，比如检查函数是否已经在执行？

Answer 1

从评论中的对话来看，您似乎希望用户能够以他们想要的速度点击元素，并让它打断现有动画并开始一个新动画，而不是让他们排队并使其在页面上滚动。您只需使用 stop 即可实现此目的:

$(".nav-scroll").click(function (event) {
    var ID = this.hash;
    //has a few extra conditionals here specific to the page

    //call stop to kill old animations
    $('html,body').stop().animate({ scrollTop: $(ID).offset().top }, 1000);
});

去抖动方法会阻止他们在动画结束之前根本不点击，而不是让他们点击一个元素，意识到他们点击了稍微错误的地方并快速点击正确的元素。