How to solve the problem of secondary triggering of angular paging plug-in tm.pagination

This article mainly introduces how to solve the problem of secondary triggering of angular paging plug-in tm.pagination. It has certain reference value. Now I share it with you. Friends in need can refer to it

Today I encountered a front-end problem when learning the paging plug-in of angularjs. When debugging the Google Chrome developer mode, I found that each time I clicked the paging refresh button, two background requests were triggered. Ajax sent two requests to the background. This is For patients with obsessive-compulsive disorder, it is a relatively disgusting and uncomfortable thing.

So I also found a reliable solution on the Internet: http://jqvue.com/tm.pagination/, and this problem was solved in this version of this maintainer. , and pay attention to the use of angularjs versions. But not satisfied with the status quo, I still found my own solution, no injections or medicines, it’s that simple! rough! 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;　　//更新总记录数
                    });
                }
            });

I have marked the core code in bold black font, and defined a global variable reload to be stored on $scope , when the reload is triggered for the second time, it is found that this global variable is in the false state, and it is returned directly. Then use the timer setTimeout to reset it after 200 milliseconds. The next refresh will not be affected and only one ajax will be sent per refresh, improving request quality and user experience.

Note: This method is not limited to the problem of repeated sending of ajax requests. For other similar repeated behaviors, you can refer to the implementation ideas of this example. Pay attention to the reasonable use of global variables to reduce memory waste.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to make HTTP requests in JavaScript

##jQuery AJAX PHP MySQL development search without jump or refresh Function

The above is the detailed content of How to solve the problem of secondary triggering of angular paging plug-in tm.pagination. For more information, please follow other related articles on the PHP Chinese website!