详解angular分页插件tm.pagination二次触发问题解决方案

时间:2020-05-16 晴朗sunny 人气:0

今天在学习angularjs的分页插件时遇到了一个前端的问题，谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求，ajax向后台发送了两次请求，这对于强迫症患者来说是一个比较恶心和感到不舒服的事情。

于是在网上也找到了靠谱的解决方案：http://jqvue.com/tm.pagination/ ，且在此维护者的这个版本中解决了此问题，同时注意 angularjs版本的配合使用。但是不满足于现状，我还是找到了自己的解决方案，不打针不吃药，就这么简单！粗暴！It's time to show the code!!

var app = angular.module("shopping", [ 'pagination' ]);
  app.controller("brandController",
      function($scope, $http) {
        $scope.reloadList = function() {
          //切换页码 
          $scope.findPage($scope.paginationConf.currentPage,
              $scope.paginationConf.itemsPerPage);
        }
        $scope.reload = true;
        //分页控件配置 
        $scope.paginationConf = {
          currentPage : 1,
          totalItems : 10,
          itemsPerPage : 10,
          perPageOptions : [ 10, 20, 30, 40, 50 ],
          onChange : function() {
            if(!$scope.reload) {
              return;
            }
            $scope.reloadList();//重新加载 这个方法会重复调用两次
            $scope.reload = false;
            setTimeout(function() {
              $scope.reload = true;
            }, 200);
          }
        };
        //分页
        $scope.findPage = function(page, rows) {
          
          $http.get(
              '../goods/findAll?pageNum=' + page + '&pageSize='
                  + rows).success(function(response) {
            $scope.list = response.rows;
            $scope.paginationConf.totalItems = response.total;　　//更新总记录数
          });
        }

      });

核心代码我已经用黑色字体加粗标识出来了，定义一个全局变量reload存于$scope上，第二次触发加载reload的时候就发现这个全局变量为false状态，则直接return。之后再用定时器setTimeout在200毫秒之后将其归位。下一次刷新不会受影响且每次刷新只会发送一次ajax，提升请求质量与用户体验。

注：此方法不仅限于实现ajax的请求重复发送问题，其他类似的重复行为可参考本实例的实现思想，注意全局变量的合理使用，减少内存浪费问题。

加载全部内容