preventing /处理的角度双按钮点击 [英] Preventing / dealing with double button clicks in angular

问题描述

在角，我们可以设置一个按钮，发送这样的Ajax请求的观点：

In angular we can set up a button to send ajax requests like this in view:

... ng-click="button-click"

和控制器中：

...
$scope.buttonClicked = function() {
   ...
   ...
   // make ajax request 
   ...
   ...
}

所以要prevent双提交，我可以设置一个标志，buttonclicked =真当一个按钮时，Ajax回调完成后单击和取消它。但是，即使如此，控制处理回角谁就会更新到大教堂。也就是说，存在这样的情况按钮可以再次点击原始按钮点击之前的小窗口已经完全100％完成。

So to prevent a double submit I could set a flag to buttonclicked = true when a button is click and unset it when the ajax callback is finished. But, even then control is handled back to angular who will updates to the Dom. That means there is a tiny window where the button could be clicked again before the original button click has completely 100% finished.

这是一个小窗口，但仍可能发生。任何提示，完全避免这种情况发生 - 即客户端未做任何更新到服务器

It's a small window but can still happen. Any tips to completely avoid this from happening - client side i.e. without making any updates to server.

感谢

推荐答案

使用 NG-停用这工作就好的例如。不管我怎么疯狂点击只填充一次。控制台消息

Using ng-disabled worked just fine in this example. No matter how furiously I clicked the console message only populated once.

我很好奇，它究竟需要多久的角度，将更改应用到 buttonDisabled 标记。如果您检查在plunker 例如该显示控制台所花费的 $ EVAL 和 $适用方法来执行。在我的机器花了1-2毫秒之间的平均值。

I was curious exactly how long it takes for angular to apply the changes to the buttonDisabled flag. If you check the console in the plunker example it displays how long it takes the $eval and $apply methods to execute. On my machine it took an average of between 1-2 milliseconds.

这篇关于preventing /处理的角度双按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！