宜宾网站建设公司

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

今天在学习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的请求重复发送问题，其他类似的重复行为可参考本实例的实现思想，注意全局变量的合理使用，减少内存浪费问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


分享文章：详解angular分页插件tm.pagination二次触发问题解决方案
URL网址：http://ybzwz.com/article/ppdcsi.html

其他资讯