So lösen Sie das Problem der sekundären Auslösung des Angular-Paging-Plug-Ins tm.pagination

Dieser Artikel stellt hauptsächlich vor, wie das Problem der sekundären Auslösung des tm.pagination-Plugins gelöst werden kann. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Heute bin ich beim Erlernen des Paging-Plug-Ins von AngularJS auf ein Front-End-Problem gestoßen. Beim Debuggen des Google Chrome-Entwicklermodus habe ich festgestellt, dass jedes Mal, wenn auf die Schaltfläche zum Aktualisieren der Seite geklickt wurde, zwei Hintergrundanforderungen gesendet wurden Zwei Bitten zum Hintergrund: Für Patienten mit Zwangsstörungen ist es eine relativ ekelhafte und unangenehme Sache.

Also habe ich auch eine zuverlässige Lösung im Internet gefunden: http://jqvue.com/tm.pagination/, und dieses Problem wurde in dieser Version des Betreuers gelöst und bezahlt Achten Sie auf die Verwendung von AngularJS-Versionen. Aber ich war mit dem Status quo nicht zufrieden, sondern habe trotzdem meine eigene Lösung gefunden, keine Injektionen oder Medikamente, so einfach ist das! rauh! Es ist Zeit, den Code zu zeigen!!

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;　　//更新总记录数
                    });
                }
            });

Ich habe den Kerncode in fetter schwarzer Schrift markiert und ein globales Variablen-Neuladen definiert, das auf $scope gespeichert werden soll Wenn das Neuladen zum zweiten Mal ausgelöst wird, wird festgestellt, dass sich diese globale Variable im falschen Zustand befindet, und sie wird direkt zurückgegeben. Verwenden Sie dann den Timer setTimeout, um ihn nach 200 Millisekunden zurückzusetzen. Die nächste Aktualisierung ist davon nicht betroffen und es wird nur ein Ajax pro Aktualisierung gesendet, was die Qualität der Anfrage und das Benutzererlebnis verbessert.

Hinweis: Diese Methode ist nicht auf das Problem des wiederholten Sendens von Ajax-Anfragen beschränkt. Für andere ähnliche wiederholte Verhaltensweisen können Sie auf die Implementierungsideen dieses Beispiels achten globale Variablen, um Speicherverschwendung zu reduzieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JavaScript verwenden, um HTTP-Anfragen zu stellen

jQuery+AJAX+PHP+MySQL-Entwicklungssuche ohne Sprung Keine Aktualisierungsfunktion

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der sekundären Auslösung des Angular-Paging-Plug-Ins tm.pagination. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!