如何解決angular分頁插件tm.pagination二次觸發的問題

這篇文章主要介紹了關於如何解決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的請求重複傳送問題，其他類似的重複行為可參考本實例的實作思想，注意全域變數的合理使用，減少記憶體浪費問題。

 以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

利用JavaScript中發出HTTP請求的方法

jQuery AJAX PHP MySQL開發搜尋無跳躍無刷新的功能

以上是如何解決angular分頁插件tm.pagination二次觸發的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！