欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angular自定义点击组件防止多次请求

程序员文章站 2022-04-10 12:02:25
...

第一次写博客不知道写什么,写个前段时间解决的一个问题作为第一篇文吧(哈哈)。
做项目的时候,经常碰到网不好请求慢的时候用户就会多次进行点击,导致提交多次请求,为了阻止这种情况,自己写了一个点击组件,替换掉原本使用的ng-click。刚开始的时候也是去网上找解决方法,但是网上的多是阻止双击的,并不能满足我需要的效果,后来突然发现$http有个pendingRequests属性——当前正在等待的请求的配置对象数组,正好可以用来判断当前请求是否结束了。

结合用$timeout来阻止双击事件的写法,最后写法如下:

.directive('singleClick',function ($parse, $rootScope, $timeout, $http) {
      var clickable = true;
      var directiveName = 'singleClick';
      return {
          restrict: 'A',
          link: function(scope, iElement, attr) {
              var fn = $parse(attr[directiveName], null, true);
              iElement.on('click', function(event) {
           
                  if (!clickable) {
                      event.preventDefault();//阻止默认事件
                      event.stopImmediatePropagation();//阻止所有事件传播 
                      return
                  }
                  else {
                      clickable = false;
                      $timeout(function () { 
                          clickable = true;
                      }, 500, false);
                  }

                  if($http.pendingRequests.length > 0){
                      event.preventDefault();//阻止默认事件
                      event.stopImmediatePropagation();//阻止所有事件传播 
                      return
                  }

                  scope.$apply(function() {
                      fn(scope, {$event:event});
                  })
              });
          }
      };
  })

然后将页面中的ng-click=“func()” 改成 single-click=“func()”。

如果是希望针对按钮有一个禁止的效果,可以使用watchwatch监听http.pendingRequests然后设置按钮的禁用启用,这样在请求完成之前按钮就一直处于不可点击状态:

    element.prop('disabled',true);
	scope.isLoading = function () {
        return $http.pendingRequests.length > 0;
    };
    var clickWatch = scope.$watch(scope.isLoading, function (loading){
        if(loading){
        	element.prop('disabled',true);
        }else{
        	element.prop('disabled',false);
        	clickWatch();
        }
    });
    scope.$apply(function() {
         fn(scope, {$event:event});
     })
相关标签: angular