详解angular分页插件tm.pagination二次触发问题解决方案
时间:2018-07-20
这篇文章主要介绍了详解angular分页插件tm.pagination二次触发问题解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
今天在学习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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于Yii2框架跑脚本时内存泄漏问题的分析与解决
- laravel 框架结合关联查询 when()用法分析
- php 实现简单的登录功能示例【基于thinkPHP框架】
- laravel框架邮箱认证实现方法详解
- 使用Git实现Laravel项目的自动化部署
- php传值和传引用的区别点总结
- php pdo连接数据库操作示例
- 关于Laravel参数验证的一些疑与惑
- PHP cookie与session会话基本用法实例分析
- Laravel 微信小程序后端实现用户登录的示例代码
- 使用PHP开发留言板功能
- PHP的new static和new self的区别与使用
- php时间戳转换代码详解
- thinkPHP和onethink微信支付插件分享
- PHP各种常见经典算法总结【排序、查找、翻转等】