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


Posted in Javascript onJuly 20, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 #Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 #Javascript
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
You might like
php下目前为目最全的CURL中文说明
2010/08/01 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
计算机专业职业生涯规划范文
2014/01/19 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
公司请假条范文
2014/04/11 职场文书
警察群众路线整改措施
2014/09/26 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
大学生个人总结范文
2015/02/15 职场文书
医学会议开幕词
2016/03/03 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS