快捷導(dǎo)航

詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案

更新時(shí)間：2018年07月20日 14:29:12 作者：晴朗sunny

這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

今天在學(xué)習(xí)angularjs的分頁插件時(shí)遇到了一個(gè)前端的問題，谷歌瀏覽器開發(fā)者模式調(diào)試的時(shí)候發(fā)現(xiàn)每次點(diǎn)擊分頁刷新按鈕會(huì)觸發(fā)兩次后臺(tái)請求，ajax向后臺(tái)發(fā)送了兩次請求，這對于強(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)識出來了，定義一個(gè)全局變量reload存于$scope上，第二次觸發(fā)加載reload的時(shí)候就發(fā)現(xiàn)這個(gè)全局變量為false狀態(tài)，則直接return。之后再用定時(shí)器setTimeout在200毫秒之后將其歸位。下一次刷新不會(huì)受影響且每次刷新只會(huì)發(fā)送一次ajax，提升請求質(zhì)量與用戶體驗(yàn)。

注：此方法不僅限于實(shí)現(xiàn)ajax的請求重復(fù)發(fā)送問題，其他類似的重復(fù)行為可參考本實(shí)例的實(shí)現(xiàn)思想，注意全局變量的合理使用，減少內(nèi)存浪費(fèi)問題。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: