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

查看：17 发布时间：2021/11/9 2:09:34 angularjs

本文介绍了防止/处理角度中的双击按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在 angular 中，我们可以设置一个按钮来发送这样的 ajax 请求:

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

在控制器中:

<预><代码>...$scope.buttonClicked = function() {......//发起ajax请求......}

因此，为了防止双重提交，我可以在单击按钮时将标志设置为 buttonclicked = true，并在 ajax 回调完成时取消设置.但是，即使这样，控制权也会被处理回 angular，谁将更新 Dom.这意味着在原始按钮点击完全 100% 完成之前，有一个小窗口可以再次点击按钮.

这是一个小窗口，但仍然可能发生.任何完全避免这种情况发生的提示 - 客户端，即不对服务器进行任何更新.

谢谢

解决方案

使用 ng-disabled 在这个示例.无论我多么疯狂地点击控制台消息只填充一次.

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.submitData = function() {$scope.buttonDisabled = true;console.log("按钮被点击");}函数扩充(){变量名，fn；for($scope 中的名称){fn = $scope[name];if (typeof fn === '函数') {if (name.indexOf("$") !== -1) {$scope[name] = (function(name, fn) {var args = 参数；返回函数(){console.log("调用" + 名称);控制台时间(名称)；fn.apply(this, arguments);console.timeEnd(name);}})(姓名, fn);}}}}增加();});

<html ng-app="plunker"><头><meta charset="utf-8"><title>AngularJS Plunker</title><link rel="stylesheet" href="style.css"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script><script src="app.js"></script><body ng-controller="MainCtrl"><input type="button" ng-click="submitData()" ng-disabled="buttonDisabled" value="提交"/></html>

我很好奇 angular 将更改应用到 buttonDisabled 标志需要多长时间.如果您检查 plunker example 中的控制台，它会显示 需要多长时间$eval 和 $apply 方法来执行.在我的机器上，平均需要 1-2 毫秒.

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

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

and in controller:

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

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.

Thanks

解决方案

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

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.submitData = function() {
    $scope.buttonDisabled = true;
    console.log("button clicked");
  }

  function augment() {
    var name, fn;
    for (name in $scope) {
      fn = $scope[name];
      if (typeof fn === 'function') {
        if (name.indexOf("$") !== -1) {
          $scope[name] = (function(name, fn) {
            var args = arguments;
            return function() {
              console.log("calling " + name);
              console.time(name);
              fn.apply(this, arguments);
              console.timeEnd(name);
            }
          })(name, fn);
        }
      }
    }
  }

  augment();
});

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="button" ng-click="submitData()" ng-disabled="buttonDisabled" value="Submit" />
</body>

</html>

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.

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

查看全文

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

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭