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

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

angular分页插件tm.pagination二次触发问题解决歪方案的更多相关文章

  1. angular分页插件tm.pagination 解决触发二次请求的问题

    angular分页插件tm.pagination(解决触发二次请求的问题) DEMO:  http://jqvue.com/demo/tm.pagination/index.html#?current ...

  2. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  3. angular 分页插件的使用

    html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...

  4. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  5. 分页插件 jquery.pagination.js

    引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...

  6. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

  7. Mybatis Plus 3.4版本之后分页插件的变化

    一.MybatisPlusInterceptor 从Mybatis Plus 3.4.0版本开始,不再使用旧版本的PaginationInterceptor ,而是使用MybatisPlusInter ...

  8. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  9. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

随机推荐

  1. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  2. 【mysql】工具使用

    mysql之workbench如何只导出(insert语句)数据 MySQL 编码:utf8 与 utf8mb4,utf8mb4_unicode_ci 与 utf8mb4_general_ci htt ...

  3. python 前后端分离 简单的数据库返回接口

    1.使用node http-server 起本地服务器  或者打开nginx 直接用nginx的默认页面也可以 (用下面的html文件替换nginx下html文件夹下的index.html) http ...

  4. python永久添加环境变量

    import sys sys.path 系统环境是一个list,可以将自己需要的库添加进入,例如mysql库,hive库等等.有三种方式添加,均验证通过:     1 临时添加,在一个shell窗口中 ...

  5. mysql中的锁

    MYSQL不同的存储引擎支持不同的锁的机制 MyISAM 支持表锁,InnoDB支持表锁和行锁 表锁,行锁比较 表锁:开销小,加锁快:不会出现死锁:锁定力度大,发生锁冲突概率高,并发度最低 行锁:开销 ...

  6. es的返回数据结构

    ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...

  7. [UE4]List View

    List View适合显示数以千条的列表 要点 一.创建Entry类,实现IUserObjectListEntry. 创建一个名为“EntryWidget”的UserWidget,添加如下图所示的控件 ...

  8. 虚拟机克隆之后,网卡名称从eth0变成eth1之后的解决办法

    使用VMware安装了CentOS虚拟机,克隆之后使用service network restart指令来重新启动网络服务时,会看到有eth0网卡不存在的提示.出现这种现象的原因是,很多Linux d ...

  9. python网页爬虫开发之五-反爬

    1.头信息检查是否频繁相同 随机产生一个headers, #user_agent 集合 user_agent_list = [  'Mozilla/5.0 (Windows NT 6.1; WOW64 ...

  10. Docker系列08:容器监控

    1 监控解决方案 cadvisor+influxdb+grafana cAdvisor:Google开源的工具,用于监控Docker主机和容器系统资源,通过图形页面实时显示数据,但不存储:它通过宿主机 ...