詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
今天在學(xué)習(xí)angularjs的分頁插件時(shí)遇到了一個(gè)前端的問題,谷歌瀏覽器開發(fā)者模式調(diào)試的時(shí)候發(fā)現(xiàn)每次點(diǎn)擊分頁刷新按鈕會(huì)觸發(fā)兩次后臺(tái)請(qǐng)求,ajax向后臺(tái)發(fā)送了兩次請(qǐng)求,這對(duì)于強(qiáng)迫癥患者來說是一個(gè)比較惡心和感到不舒服的事情。
于是在網(wǎng)上也找到了靠譜的解決方案:http://jqvue.com/tm.pagination/ ,且在此維護(hù)者的這個(gè)版本中解決了此問題,同時(shí)注意 angularjs版本的配合使用。但是不滿足于現(xiàn)狀,我還是找到了自己的解決方案,不打針不吃藥,就這么簡單!粗暴!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();//重新加載 這個(gè)方法會(huì)重復(fù)調(diào)用兩次 $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; //更新總記錄數(shù) }); } });
核心代碼我已經(jīng)用黑色字體加粗標(biāo)識(shí)出來了,定義一個(gè)全局變量reload存于$scope上,第二次觸發(fā)加載reload的時(shí)候就發(fā)現(xiàn)這個(gè)全局變量為false狀態(tài),則直接return。之后再用定時(shí)器setTimeout在200毫秒之后將其歸位。下一次刷新不會(huì)受影響且每次刷新只會(huì)發(fā)送一次ajax,提升請(qǐng)求質(zhì)量與用戶體驗(yàn)。
注:此方法不僅限于實(shí)現(xiàn)ajax的請(qǐng)求重復(fù)發(fā)送問題,其他類似的重復(fù)行為可參考本實(shí)例的實(shí)現(xiàn)思想,注意全局變量的合理使用,減少內(nèi)存浪費(fèi)問題。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳細(xì)介紹RxJS在Angular中的應(yīng)用
本篇文章主要介紹了詳細(xì)介紹RxJS在Angular中的應(yīng)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09angularjs實(shí)現(xiàn)table增加tr的方法
下面小編就為大家分享一篇angularjs實(shí)現(xiàn)table增加tr的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密
AngularJS 是一個(gè) JavaScript 框架,它可以通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密的相關(guān)資料,需要的朋友可以參考下2016-08-08AngularJS實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實(shí)例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2017-06-06AngularJS ng-controller 指令簡單實(shí)例
本文主要介紹AngularJS ng-controller 指令,這里對(duì)ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證
這篇文章主要介紹了Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證,ng-messages提供了更方便的表單數(shù)據(jù)驗(yàn)證服務(wù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12