详解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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
vue 项目build错误异常的解决方法
Apr 22 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
JS实现图片幻灯片效果代码实例
May 21 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连接Access数据库的方法小结
2013/06/20 PHP
php短信接口代码
2016/05/13 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Vue.js开发环境搭建
2016/11/10 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
webpack4 处理CSS的方法示例
2018/09/03 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
庆七一活动方案
2014/01/25 职场文书
学期自我评价
2014/01/27 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
应届生简历自我评价
2015/03/11 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技