AngularJS如何限制双击/多次点击

AngularJS How to restrict double/multiple click

本文关键字：何限制 双击 AngularJS      更新时间：2023-09-26

我知道一个在angularJS上双击/多次的解决方案，它可以禁用按钮点击&在使用禁用的ng完成ajax处理后启用它。请建议任何其他处理angularJS双击的最佳解决方案。。。

我们的代码将在点击按钮时调用ajax方法；将需要少量的tme来处理&从数据库获取数据。我们必须限制二次/多次点击的平均时间。

我不想在ajax进行时允许点击。。。

欢迎使用简单的解决方案，而不是禁用ng，我是AngularJS 的学习者

createDialogService（'js/common/templates/popup/config_reminder_popup.html'，{title：isFrom，背景：真实，controller:'configReminderCController'，页脚模板："+操作+"})；

$scope.saveOrUpdateReminder = function (reminder)
{
  if ($scope.isDisabled)
  {
    return;
  }
  $scope.isDisabled = true;
  if (!reminder.daysBeforeAfterCheckDate || reminder.daysBeforeAfterCheckDate === '')
  {
    alertService.openValidatPopup('Please enter days before expiration.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
    $scope.isDisabled = false;
    return;
  }
  configRemindersService.isDaysBeforeAfterCheckDate($scope.objectId, reminder, function (result)
  {
    if (!reminder.selectedMessageTemplate.messageId || reminder.selectedMessageTemplate.messageId === '')
    {
      alertService.openValidatPopup('Please select message template.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
      $scope.isDisabled = false;
      return;
    }
    else if (!reminder.selectedReminderSendOption.reminderSendOptionValue || reminder.selectedReminderSendOption.reminderSendOptionValue === '')
    {
      alertService.openValidatPopup('Please select reminder send option.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
      $scope.isDisabled = false;
      return;
    }
    var enableReminder;
    if (result.Result === 'No')
    {
      if (reminder.enable === true)
      {
        enableReminder = 'Enable';
      }
      else
      {
        enableReminder = 'Disable';
      }
      configRemindersService.addOrUpdateReminderConfigLine($scope.objectId, reminder, enableReminder, function (remindersResponse)
      {
        var reminder = remindersResponse.reminderConfigLine;
        $rootScope.CONFIG = JSON.parse(remindersResponse.configData);
        $scope.$modalClose();
        $scope.isDisabled = false;
        _.filter(configRemindersService.getMessageTemplates(), function (msg)
        {
          if (reminder.messageTemplateId === msg.messageId)
          {
            reminder.selectedMessageTemplate = msg;
          }
        });
        _.filter(configRemindersService.getReminderSendOptions(), function (option)
        {
          if (reminder.reminderSendOption === option.reminderSendOptionValue)
          {
            reminder.selectedReminderSendOption = option;
          }
        });
        if (configRemindersService.getIsFrom() === 'Create Reminder')
        {
          configRemindersService.getReminders().push(reminder);
        }
        else
        {
          configRemindersService.getReminders()[configRemindersService.getIndex()] = reminder;
        }
      });
    }
  });
};
禁用

ng-disabled绝对是正确的方法——它是在特定条件下禁用对象的现成指令。

如果你需要禁用它而不让它看起来被禁用，你有两个选项：

  1. 将禁用状态的css更改为启用状态
  2. 用一个范围变量模拟它，该变量仅在设置时执行操作

第二：

$scope.stopClick = false;
$scope.buttonClick = function () {
    if ($scope.stopClick) { return; }
    $scope.stopClick = true;
    <.. code ..>
    callback: function(data) {
        $scope.stopClick = false;
    }
};

这将实现目标，但它正在重新发明轮子，可能不如仅仅禁用元素并重新设计它那么健壮。

你可以这样做：

创建$scope变量

$scope.myFunnyPromise = null;

在模板中：

<button ng-if="myFunnyPromise == null"></button>

仅当myFunnyPromise等于null时显示按钮。

在你的功能中：

if($scope.myFunnyPromise !== null){
  return $scope.myFunnyPromise;
}
$scope.myFunnyPromise = asyncTask().finally(function cleanUp(){
  //clear the $scope variable
  $scope.myFunnyPromise = null;
})

您可以在$rootScope中拥有一个函数，该函数包含有关是否存在正在进行的http请求的信息。然后，您可以使用该值禁用不希望连续单击事件的按钮。

当有一个正在进行的http请求时，我通常使用fieldset属性来禁用输入字段。

<fieldset ng-disabled="isWaitingForServerResponse()">  //when there is an ongoing request, input fields under this tag will be disabled       </fieldset>

为了实现isWaitingForServerResponse，我从一个繁忙的bar实现中得到了帮助，该实现显示了一个在有http请求时加载的bar。它在出现新请求时创建事件，在停止时创建另一个请求。因此，在这些事件中，我增加了一个计数器，该计数器保存活动http请求的数量，并为每个http响应递减。我以前没有使用过它，但我想您也可以使用$http.pendingRequests属性来了解是否存在挂起的http请求。

$rootScope.numberOfResponseWaitingFromServer = 0;
$rootScope.$on("cfpLoadingBar:loading", function (event) {
  $rootScope.numberOfResponseWaitingFromServer++;
});
$rootScope.$on("cfpLoadingBar:loaded", function (event) {
  $rootScope.numberOfResponseWaitingFromServer--;
});
$rootScope.isWaitingForServerResponse = function () {
  return $rootScope.numberOfResponseWaitingFromServer > 0;
}
相关文章：