javascript - 如何处理双击网页？

Question

检查我们的网络日志，我们发现大量点击是其他双击或重复点击(例如，当系统繁忙且 react 不够快时)。

双击提交按钮可能会导致表单处理两次(通常我们对此进行编程，但我想避免出现我们没有编程过的错误的可能性)，但即使双击链接也意味着服务器必须处理两次响应(通常服务器会在第一次点击时检测到“断开连接”并为此中止处理 - 但我们仍然会为此付出服务器时间，当服务器负载很重时会更加复杂) .

话虽如此，但有时我从未收到对点击的响应，只有重新点击才有效。

我们确实看到的一个操作是误点击 - 点击链接，意识到它不是所需的链接，然后点击正确的相邻链接 - 显然我们仍然需要允许这种情况。

你如何处理这个/你有什么建议？一般而言，在整个应用程序中实现这一目标的最佳方式是什么？

1) 我们可以在点击后禁用链接/按钮(可能在设定的时间段内，然后重新启用)

2) 我们可以隐藏页面的“正文”——我们过去曾这样做过，只留下“横幅” Pane (在所有页面上看起来都一样)，它给出了下一页加载的外观(但在某些浏览器中不能很好地使用 BACK 按钮)——这也会让误点击的用户感到困惑

Answer 1

您可以结合使用 delegate 和 data 来做到这一点:

$(document).delegate('a, :button', 'click', function(e) {
    var lastClicked = $.data(this, 'lastClicked'),
        now = new Date().getTime();

    if (lastClicked && (now - lastClicked < 1000)) {
        e.preventDefault();
    } else {
        $.data(this, 'lastClicked', now);
    }
});

这将防止不断重新绑定(bind)，因此应该有不错的性能。