angular分頁插件tm.pagination二次觸發問題解決歪方案

　　今天在學習angularjs的分頁插件時遇到了一個前端的問題，谷歌瀏覽器開發者模式調試的時候發現每次點擊分頁刷新按鈕會觸發兩次后台請求，ajax向后台發送了兩次請求，這對於強迫症患者來說是一個比較惡心和感到不舒服的事情。

　　於是在網上也找到了靠譜的解決方案：http://jqvue.com/tm.pagination/ ，且在此維護者的這個版本中解決了此問題，同時注意 angularjs版本的配合使用。但是不滿足於現狀，我還是找到了自己的解決方案，不打針不吃葯，就這么簡單！粗暴！It's time to show the code!!

var app = angular.module("shopping", [ 'pagination' ]);  2     app.controller("brandController",  3             function($scope, $http) {  4                 $scope.reloadList = function() {  5                     //切換頁碼 
 $scope.findPage($scope.paginationConf.currentPage,  7  $scope.paginationConf.itemsPerPage);  8  }  9                 $scope.reload = true; 10                 //分頁控件配置 
                $scope.paginationConf = { 12                     currentPage : 1, 13                     totalItems : 10, 14                     itemsPerPage : 10, 15                     perPageOptions : [ 10, 20, 30, 40, 50 ], 16                     onChange : function() { 17                         if(!$scope.reload) { 18                           return; 19  } 20                         $scope.reloadList();//重新加載 這個方法會重復調用兩次
                        $scope.reload = false; 22                         setTimeout(function() { 23                             $scope.reload = true; 24                         }, 200); 25  } 26  }; 27                 //分頁
                $scope.findPage = function(page, rows) { 29                     
 $http.get( 31                             '../goods/findAll?pageNum=' + page + '&pageSize='
                                    + rows).success(function(response) { 33                         $scope.list = response.rows; 34                         $scope.paginationConf.totalItems = response.total;　　//更新總記錄數
 }); 36  } 37 
            });

　　核心代碼我已經用黑色字體加粗標識出來了，定義一個全局變量reload存於$scope上，第二次觸發加載reload的時候就發現這個全局變量為false狀態，則直接return。之后再用定時器setTimeout在200毫秒之后將其歸位。下一次刷新不會受影響且每次刷新只會發送一次ajax，提升請求質量與用戶體驗。

 　　注：此方法不僅限於實現ajax的請求重復發送問題，其他類似的重復行為可參考本實例的實現思想，注意全局變量的合理使用，減少內存浪費問題。

 

歡迎提出更簡單的解決方案，一起學習進步！