각도 페이징 플러그인 tm.pagination의 2차 트리거 문제를 해결하는 방법

이 글은 주로 Angular Paging 플러그인 tm.pagination의 2차 트리거 문제를 해결하는 방법을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. #🎜🎜 #

오늘 Anglejs 페이징 플러그인을 배울 때 프런트엔드 문제에 직면했습니다. Google Chrome 개발자 모드를 디버깅할 때 페이징 새로 고침 버튼을 클릭할 때마다 두 개의 백그라운드 요청이 트리거되는 것을 발견했습니다. , ajax가 두 번 백그라운드로 전송되었습니다. 이는 강박 장애가 있는 사람들에게는 상대적으로 역겹고 불편한 일입니다.

그래서 저는 인터넷에서도 믿을 수 있는 해결책을 찾았습니다: http://jqvue.com/tm.pagination/, 이 버전의 관리자에서는 이 문제는 다음과 같습니다. 해결되었고,angularjs 버전의 사용에 주의가 기울여졌습니다. 하지만 현재 상태에 만족하지 않고 주사나 약을 사용하지 않고 나만의 해결책을 찾았습니다. 너무나 간단합니다! 거친!

코드를 보여줄 시간입니다!!

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

핵심 코드를 굵은 검정색 글꼴로 표시하고 전역 변수 Reload를 정의했습니다. $scope에 저장됩니다. 두 번째로 reload가 실행되면 이 전역 변수가 false 상태인 것으로 확인되어 직접 반환됩니다. 그런 다음 타이머 setTimeout을 사용하여 200밀리초 후에 재설정합니다. 다음 새로 고침은 영향을 받지 않으며 새로 고침당 하나의 Ajax만 전송되므로 요청 품질과 사용자 경험이 향상됩니다.

참고: 이 방법은 Ajax 요청을 반복적으로 보내는 문제에만 국한되지 않습니다. 다른 유사한 반복 동작은 이 예제의 구현 아이디어를 참조할 수 있습니다. 메모리 낭비를 줄이기 위한 전역 변수.

위 내용은 모두의 학습에 도움이 되기를 바라는 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

JavaScript를 사용하여 HTTP 요청 만들기

jQuery+AJAX +PHP +MySQL은 점프나 새로 고침 없이 검색 기능을 개발합니다

위 내용은 각도 페이징 플러그인 tm.pagination의 2차 트리거 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!