在前端開發中，jquery ajax 是非常常用的技術之一。但有時候我們會遇到 ajax 重復加載的問題。這種問題通常由一些常見的錯誤引起，下面我們將通過一些例子來說明。

$.ajax({
url: '/api/user/1',
success: function(data) {
// 對數據進行處理
}
})

以上代碼會從后端獲取一些用戶數據并進行處理。但是，如果我們多次發送這個請求，獲取同樣的數據，會發現大量重復的數據加載，這是因為我們沒有添加緩存控制。

$.ajax({
url: '/api/user/1',
cache: false,
success: function(data) {
// 對數據進行處理
}
})

上述代碼給請求設置了一個新屬性 cache:false，w這將會把獲取到的數據存儲在緩存中，同一個請求只會被加載一次。

var loading = false;
$(window).on('scroll', function() {
if($(this).scrollTop() + $(this).height() >= $('body')[0].scrollHeight) {
if(!loading) {
loading = true;
$.ajax({
url: '/api/users',
success: function(data) {
// 滾動下一頁數據加載完成
loading = false;
}
});
}
}
});

上述代碼會觸發滾動事件，滾動頁面到底部將會加載下一頁數據，但是，如果用戶連續快速地滾動頁面，會重復發送 ajax 請求，這將導致多次加載相同的數據。

var loading = false;
var timeoutId;
$(window).on('scroll', function() {
if($(this).scrollTop() + $(this).height() >= $('body')[0].scrollHeight) {
if(!loading) {
loading = true;
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
$.ajax({
url: '/api/users',
success: function(data) {
// 滾動下一頁數據加載完成
loading = false;
}
});
}, 500);
}
}
});

上述代碼解決了連續快速滾動頁面發送 ajax 請求的問題。可以通過 setTimeout 函數延遲發送請求，防止重復請求相同的數據。