Javascript是一門運(yùn)行在客戶端的腳本語言，常用于頁面交互和數(shù)據(jù)交換。AJAX（Asynchronous Javascript and XML, 異步的Javascript和XML）是一種在頁面中進(jìn)行數(shù)據(jù)交換的技術(shù)，通過異步方式來進(jìn)行數(shù)據(jù)請求和響應(yīng)。但是，如果我們在使用AJAX時不小心設(shè)置了重復(fù)請求，那么就會導(dǎo)致服務(wù)器資源的浪費(fèi)和頁面性能的下降。

假設(shè)我們要查詢商品列表，我們可以通過AJAX異步請求的方式來獲取數(shù)據(jù)：

const getList = () =>{
return new Promise((resolve, reject) =>{
$.ajax({
url: "https://api.example.com/goods",
type: "GET",
dataType: "json",
success: function(data) {
resolve(data);
},
error: function(error) {
reject(error);
}
})
})
}

當(dāng)用戶點(diǎn)擊按鈕時，我們就可以調(diào)用getList方法來獲取商品列表：

$('button').on('click', () =>{
getList().then((data) =>{
// 處理商品列表數(shù)據(jù)
}).catch((error) =>{
console.log(error);
})
})

問題就出在這里，如果用戶頻繁點(diǎn)擊按鈕，就會導(dǎo)致getList方法被重復(fù)調(diào)用，進(jìn)而導(dǎo)致重復(fù)的請求發(fā)送到服務(wù)器：

$('button').on('click', () =>{
getList().then((data) =>{
// 處理商品列表數(shù)據(jù)
}).catch((error) =>{
console.log(error);
})
// 這里又調(diào)用了getList方法，產(chǎn)生了重復(fù)請求
getList().then((data) =>{
// 處理商品列表數(shù)據(jù)
}).catch((error) =>{
console.log(error);
})
})

解決辦法有很多種，比如可以添加節(jié)流函數(shù)，限制一定時間內(nèi)只能發(fā)起一次請求：

let canRequest = true;
$('button').on('click', () =>{
if (!canRequest) {
return;
}
canRequest = false;
getList().then((data) =>{
// 處理商品列表數(shù)據(jù)
canRequest = true;
}).catch((error) =>{
console.log(error);
canRequest = true;
})
})
// 節(jié)流函數(shù)
function throttle(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(() =>{
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
$('button').on('click', throttle(() =>{
getList().then((data) =>{
// 處理商品列表數(shù)據(jù)
}).catch((error) =>{
console.log(error);
})
}, 1000));

另外，我們還可以通過判斷請求的狀態(tài)碼，在服務(wù)器端判斷是否返回重復(fù)數(shù)據(jù)：

const lastRequest = null;
const getList = () =>{
return new Promise((resolve, reject) =>{
$.ajax({
url: "https://api.example.com/goods",
type: "GET",
dataType: "json",
success: function(data) {
if (data === lastRequest) {
// 返回的數(shù)據(jù)與上一次請求相同，忽略本次請求
resolve(null);
} else {
lastRequest = data;
resolve(data);
}
},
error: function(error) {
reject(error);
}
})
})
}

總之，在使用AJAX時，我們一定要注意避免重復(fù)請求，節(jié)約服務(wù)器資源，提升頁面性能。