Today, I encountered a front-end problem while learning the paging plug-in of angularjs. During the debugging of Google browser developer mode, I found that each click of paging refresh button would trigger two background requests, and ajax sent two requests to the background. This is a disgusting and uncomfortable thing for obsessive-compulsive patients.

So we found a reliable solution on the Internet: http://jqvue.com/tm.pagination/ , and this problem is solved in this version of the maintainer. At the same time, pay attention to the use of angularjs version. But not satisfied with the status quo, I still found my own solution, no injection, no medicine, so simple! Brutal! 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                     //Toggle page number  
 6                     $scope.findPage($scope.paginationConf.currentPage,
 7                             $scope.paginationConf.itemsPerPage);
 8                 }
 9                 $scope.reload = true;
10                 //Paging control configuration 
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();//Reload this method twice
21                         $scope.reload = false;
22                         setTimeout(function() {
23                             $scope.reload = true;
24                         }, 200);
25                     }
26                 };
27                 //paging
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;　　//Total records updated
35                     });
36                 }
37 
38             });

I have identified the core code with bold black font. Define a global variable reload to be saved on $scope. When the reload is triggered the second time, it will be found that the global variable is in the false state, and then return directly. Then use the timer setTimeout to reset it after 200ms. The next refresh will not be affected and each refresh will only send ajax once, improving the request quality and user experience.

Note: this method is not limited to the repeated sending of requests to realize ajax. For other similar repeated behaviors, please refer to the implementation idea of this example, pay attention to the reasonable use of global variables, and reduce the problem of memory waste.

Welcome to come up with simpler solutions and learn together!