溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天在學習angularjs的分頁插件時遇到了一個前端的問題，谷歌瀏覽器開發者模式調試的時候發現每次點擊分頁刷新按鈕會觸發兩次后臺請求，ajax向后臺發送了兩次請求，這對于強迫癥患者來說是一個比較惡心和感到不舒服的事情。
于是在網上也找到了靠譜的解決方案：http://jqvue.com/tm.pagination/ ，且在此維護者的這個版本中解決了此問題，同時注意 angularjs版本的配合使用。但是不滿足于現狀，我還是找到了自己的解決方案，不打針不吃藥，就這么簡單！粗暴！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; //更新總記錄數
});
}
});
核心代碼我已經用黑色字體加粗標識出來了，定義一個全局變量reload存于$scope上，第二次觸發加載reload的時候就發現這個全局變量為false狀態，則直接return。之后再用定時器setTimeout在200毫秒之后將其歸位。下一次刷新不會受影響且每次刷新只會發送一次ajax，提升請求質量與用戶體驗。
注：此方法不僅限于實現ajax的請求重復發送問題，其他類似的重復行為可參考本實例的實現思想，注意全局變量的合理使用，減少內存浪費問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
