今天在學習angularjs的分頁插件時遇到了一個前端的問題，谷歌瀏覽器開發者模式調試的時候發現每次點擊分頁刷新按鈕會觸發兩次後臺請求，ajax向後臺發送了兩次請求，這對於強迫症患者來說是一個比較噁心和感到不舒服的事情。 於是在網上也找到了靠譜的解決方案：http://jqvue.com/tm.pa ...
今天在學習angularjs的分頁插件時遇到了一個前端的問題，谷歌瀏覽器開發者模式調試的時候發現每次點擊分頁刷新按鈕會觸發兩次後臺請求，ajax向後臺發送了兩次請求，這對於強迫症患者來說是一個比較噁心和感到不舒服的事情。
於是在網上也找到了靠譜的解決方案：http://jqvue.com/tm.pagination/ ，且在此維護者的這個版本中解決了此問題，同時註意 angularjs版本的配合使用。但是不滿足於現狀，我還是找到了自己的解決方案，不打針不吃藥，就這麼簡單！粗暴！It's time to show the code!!
1 var app = angular.module("shopping", [ 'pagination' ]);
2 app.controller("brandController",
3 function($scope, $http) {
4 $scope.reloadList = function() {
5 //切換頁碼
6 $scope.findPage($scope.paginationConf.currentPage,
7 $scope.paginationConf.itemsPerPage);
8 }
9 $scope.reload = true;
10 //分頁控制項配置
11 $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();//重新載入 這個方法會重覆調用兩次
21 $scope.reload = false;
22 setTimeout(function() {
23 $scope.reload = true;
24 }, 200);
25 }
26 };
27 //分頁
28 $scope.findPage = function(page, rows) {
29
30 $http.get(
31 '../goods/findAll?pageNum=' + page + '&pageSize='
32 + rows).success(function(response) {
33 $scope.list = response.rows;
34 $scope.paginationConf.totalItems = response.total; //更新總記錄數
35 });
36 }
37
38 });
核心代碼我已經用黑色字體加粗標識出來了，定義一個全局變數reload存於$scope上，第二次觸發載入reload的時候就發現這個全局變數為false狀態，則直接return。之後再用定時器setTimeout在200毫秒之後將其歸位。下一次刷新不會受影響且每次刷新只會發送一次ajax，提升請求質量與用戶體驗。
註：此方法不僅限於實現ajax的請求重覆發送問題，其他類似的重覆行為可參考本實例的實現思想，註意全局變數的合理使用，減少記憶體浪費問題。
歡迎提出更簡單的解決方案，一起學習進步！
