Question

我遇到多个ajax请求的问题。例如，我有一个带有按钮的表单，onclick它运行的服务基本上加载了表中的项目列表;现在它应该在我按下按钮时将单个项目加载到表格中。

但是，当我多次按下按钮时，相同的项目在加载时会重复。

如果第一个仍然没有回调，我怎么能阻止？

当前的服务

var getItems = function () {

    var def = $q.defer();

    Items.get().then(function (items) {
       def.resolve(items);
    }, function (err) {
       ...
    });
};

不确定这是否是一个解决方案，但是当我写上面这样的代码时：

var def = false;
var getItems = function () {

    def = $q.defer();

    Items.get().then(function (items) {
       def.resolve(items);
    }, function (err) {
       ...
    });
};

这会在我初始化def = false时停止重复，通过将之前/旧请求重置为false来确定这是否是正确方法？

Answer 1

您可以锁定该函数以防止代码一次运行多次或根本不运行：

// your service
$scope.isRunning = false;

var getItems = function () {

    if(!$scope.isRunning){
        $scope.isRunning = true;
        var def = $q.defer();

        Items.get().then(function (items) {
           def.resolve(items);
        }, function (err) {
           ...
        }).finally(function(){
             //$scope.isRunning = false; // once done, reset isRunning to allow to run again. If you want it to run just once then exclude this line
        });
    }
};

不确定如何多次点击按钮来处理按钮

您可以点击隐藏它：

<button ng-hide="isRunning">Stuff</button>

您可以点击停用它：

<button ng-disabled="isRunning">Stuff</button>

如果禁用，您应该提供反馈，例如更改不透明度：

<button ng-disabled="isRunning" ng-class='{"opacity-half": isRunning}'>Stuff</button>
.opacity-half { opacity: 0.5 }

Answer 2

下面的代码应该做的伎俩我避免使用某些特定于角度的语法希望有所帮助;

function yourContoller(/*all injectables*/) {
  var requesting = false;
  $scope.buttonClick = function() {
     if (!requesting) {
       requesting = true;
       yourService.getItems().then(function(response) {
          /*your code to handle response*/
          requesting = false;
       });
     }
  };
}

如果要在视图中禁用某个按钮，只需将范围（$scope.requesting = false;）与ng-disabled一起使用即可公开此变量。

Answer 3

您可以创建一个可重复使用的指令，以便在任何可点击的按钮上，它不会被按两次

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

这可以在按钮上使用，如下所示：

<button click-and-disable="functionThatReturnsPromise()">Click me</button>

防止多个ajax请求onclick

当前的服务

3 个答案: