防止/处理有角的双击

一尘不染

防止/处理有角的双击

angularjs

在angular中，我们可以设置一个按钮来发送ajax请求，如下所示：

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

并在控制器中：

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

因此，为防止重复提交，我可以在单击按钮时将标志设置为buttonclicked =
true，而在ajax回调完成时将其取消设置。但是，即使这样，控制权仍会归还给有角力的人，他们将更新Dom。这意味着有一个很小的窗口，在原始按钮单击完全100％完成之前，可以再次单击该按钮。

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

谢谢

阅读 167

2020-07-04

共1个答案

一尘不染

ng- disabled在此示例中，使用工作正常。无论我多么疯狂地单击控制台消息，它仅填充一次。

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>

我很好奇到底角度将更改应用到buttonDisabled标志需要多长时间。如果在插件示例中检查控制台，它将显示$eval和$apply方法执行所需的时间。在我的机器上，平均需要1-2毫秒。

2020-07-04