Comment résoudre le problème du déclenchement secondaire du plug-in de pagination angulaire tm.pagination

Cet article présente principalement comment résoudre le problème du déclenchement secondaire du plug-in de pagination angulaire tm.pagination. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Aujourd'hui, j'ai rencontré un problème frontal lors de l'apprentissage du plug-in de pagination d'angularjs. Lors du débogage du mode développeur de Google Chrome, j'ai constaté que chaque fois que je cliquais sur le bouton d'actualisation de la pagination, cela déclenchait deux requêtes en arrière-plan. a envoyé deux demandes en arrière-plan. Pour les patients souffrant de trouble obsessionnel-compulsif, c'est une chose relativement dégoûtante et inconfortable.

J'ai donc aussi trouvé une solution fiable sur Internet : http://jqvue.com/tm.pagination/, et ce problème a été résolu dans cette version de ce mainteneur, et payant attention à l'utilisation des versions d'angularjs. Mais pas satisfait du statu quo, j’ai quand même trouvé ma propre solution, pas d’injections ni de médicaments, c’est aussi simple que ça ! rugueux! Il est temps d'afficher le 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;　　//更新总记录数
                    });
                }
            });

J'ai marqué le code principal en gras noir et défini un rechargement de variable globale stocké dans $ On Dans le scope, lorsque le rechargement est déclenché pour la deuxième fois, on constate que cette variable globale est à l'état faux, et elle est renvoyée directement. Utilisez ensuite le timer setTimeout pour le réinitialiser après 200 millisecondes. La prochaine actualisation ne sera pas affectée et un seul ajax sera envoyé par actualisation, améliorant ainsi la qualité des requêtes et l'expérience utilisateur.

Remarque : Cette méthode ne se limite pas au problème de l'envoi répété de requêtes ajax. Pour d'autres comportements répétés similaires, vous pouvez vous référer aux idées d'implémentation de cet exemple. Faites attention à l'utilisation raisonnable de. variables globales pour réduire le gaspillage de mémoire.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser JavaScript pour effectuer des requêtes HTTP

JQuery+AJAX+PHP+MySQL recherche de développement sans saut Aucune fonction d'actualisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!