为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
AngularJS

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

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

复制代码

 1 var app = angular.module("shopping", [ 'pagination' ]); 2     app.controller("brandController", 3             function($scope, $http) { 4                 $scope.reloadList = function() { 5                     //切换页码   6                     $scope.findPage($scope.paginationConf.currentPage, 7                             $scope.paginationConf.itemsPerPage); 8                 } 9                 $scope.reload = true;10                 //分页控件配置 11                 $scope.paginationConf = {12                     currentPage : 1,13                     totalItems : 10,14                     itemsPerPage : 10,15                     perPageOptions : [ 10, 20, 30, 40, 50 ],16                     onChange : function() {17                         if(!$scope.reload) {18                             return;19                         }20                         $scope.reloadList();//重新加载  这个方法会重复调用两次21                         $scope.reload = false;22                         setTimeout(function() {23                             $scope.reload = true;24                         }, 200);25                     }26                 };27                 //分页28                 $scope.findPage = function(page, rows) {29                     30                     $http.get(31                             '../goods/findAll?pageNum=' + page + '&pageSize='32                                     + rows).success(function(response) {33                         $scope.list = response.rows;34                         $scope.paginationConf.totalItems = response.total;  //更新总记录数35                     });36                 }37 38             });

复制代码

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

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

 

欢迎提出更简单的解决方案,一起学习进步!

原文出处

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消