今天在学习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二次触发问题解决歪方案的更多相关文章

  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. STL:unique()函数

    unique() unique()是剔除重复他是剔除相邻之间字符重复的,倘若其中中的字符前后之间是没有重复的,unique函数是起不到作用的,所以使用以前都会sort处理. unique()函数的返回 ...

  2. 一款我常用到的手机app

    我从初中开始接触电子书,后来渐渐养成了看电子书的习惯.在阅读电子书的过程中自然要接触到各种各样的阅读类的手机app,比如书旗.qq阅读.百度阅读器等等.个人感觉掌阅使用起来好一些. 首先,它的界面很简 ...

  3. findHomography(src_points, dst_points, CV_RANSAC)

    Homography,即单应性,该函数用于求src_points转换为dst_poinsts的单应性矩阵: 为了理解单应性,必须先引入透视变换的概念:把空间坐标系中的三维物体或对象转变为二维图像表示的 ...

  4. linux ---> taskkill pid 8080 /f

    ★ :--linux->-端口占用 : netstat -anonetstat -ano|findstr 8003taskkill /pid 4816 /f

  5. 使用samba或NFS实现文件共享

  6. MySQL通过分组计算百分比

    公司在做柯米克的分析报告,需要我这边把汽车之家柯米克论坛的评论数据和评论用户所在地的数据获取,通过爬虫的方式很快的解决了数据的问题,但是需要我提取下各省评论人数的比例,所以在数据库里面直接计算了相关的 ...

  7. instant client 的配置

    instant client 的配置 oracle server developer自带了客户端 解压目录:D:\Toolkit\instantclient_11_2 设置环境变量 Ø  在Path变 ...

  8. python if not

    判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不会出现错误,以后坚持使用这种写法. 使用 ...

  9. 3.STM32复位系统

    一.概念 复位: 使系统结束当前运行状态,重新开始运行,并根据复位种类,将系统的寄存器(特定的寄存器除外)恢复到默认状态. 二.复位的种类 1.系统复位 将除了系统后备区域寄存器(BKP)和时钟控制寄 ...

  10. 3.CM3内核架构-寄存器

    一.寄存器的种类