javascript - 如何防止多次点击 AngularJS 中的链接？

Question

我有一个链接可以增加数据库中的值，前提是它低于某个阈值，如下所示：

if (currentValue + 10 < maxValue)
{
$http({method: 'GET', url: 'api.increaseValue/10'}) ...
}

但是，如果我快速单击，则所有单击都会通过 if 条件并同时启动一堆请求，这些请求可以使值超过阈值。有没有办法优雅地处理这个问题？

score 3 · Accepted Answer

有很多方法可以处理这个问题。除了@praneetloke 已经提到的，这里还有一些想法。

单击处理程序/函数可以首先禁用按钮，发送 http 请求，然后在收到来自服务器的确认时再次启用按钮 - 此时我假设 currentValue 也会更新。
在本地更新 currentValue，跟踪未完成的服务器请求，然后在您的 http 回调中处理任何错误情况。例如，如果它没有在服务器端更新，弹出一个错误对话框并适当地减少 currentValue —— 即，通过未完成的服务器请求的数量。

score 0 · Accepted Answer

使用setTimeout () 来延迟函数的执行。此外，在函数中使用全局标志，如果该函数当前正在为上一次单击执行，则该标志将返回函数执行。然后，当您的 API 调用返回时，重置标志以允许后续单击调用该函数。

该建议还取决于递增的值代表什么。您必须确定您的用户是否可以忽略快速点击。如果他们是故意这样做而您不想允许，也许您必须显示一条友好的消息，说明正在处理先前的请求，并且他们必须等待才能再次单击。

如果您提供此操作的一些上下文并显示更多有关此功能正在做什么的代码，我可能会改进答案。

2 回答 2