作為一個老前端，本案例是基於jquery來寫的。
前端渲染頁面拿數據，無非就是ajax、socket，其他的暫時沒有用過，但項目還是使用ajax比較多。
下面來看一個簡單基於ajax短輪詢的請求
function req() {
$.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
success: function(res) {
console.log(res);
},
error: function() {
console.log('请求失败~');
}
});
}
req();
setInterval(req, 3000);如果網速快而穩定的話，可以這樣使用，但網速誰能確定呢，如果網速不穩定的話，請求一個介面需要5~10秒，這樣就會造成ajax請求堆積，近而引發不可估量的問題，那麼怎樣去避免這個問題呢？
方式一：給請求賦上一個變量，然後每次輪詢先abort掉上一個請求
var ajaxReq = null;
function req(isLoading) {
if(ajaxReq !== null) {
ajaxReq.abort();
ajaxReq = null;
}
ajaxReq = $.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
beforeSend: function() {
if(isLoading) {
$('.zh-loading').show();
}
},
success: function(res) {
console.log(res);
},
complete: function() {
if(isLoading) {
$('.zh-loading').hide();
}
},
error: function() {
console.log('请求失败~');
}
});
}
req(true);
setInterval(function() {
req(false);
}, 3000);猛一看，感覺還行，差不多就OK了，但作為前端的我們要不斷的去尋找更適合的方式，所以有個下面這個。
方式二：每一次輪詢都判斷上一次請求是否完成，完成了才會執行下一次的請求（推薦）
var isLoaded = false;
function req(opts) {
$.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
beforeSend: function() {
if(opts.init === 1) {
$('.zh-loading').show();
}
isLoaded = false;
},
success: function(res) {
console.log(res);
},
complete: function() {
if(opts.init === 1) {
$('.zh-loading').hide();
}
isLoaded = true;
},
error: function() {
console.log('请求失败~');
}
});
}
req({"init": 1});
setInterval(function() {
isLoaded && req({"init": 0});
}, 3000);上面的isLoaded && req({"init": 0}); 表示前面一個條件正確，則執行&&後面的方法
正常的寫法是
if(isLoaded) req({"init": 0});另外注意一點： isLoaded=true 要在complete裡加，如果只在success裡加的話， 請求失敗了就不會輪詢再請求了。 complete不管success或error都會執行
程式碼就到這裡了，thank you for attention~
以上是ajax即時刷新處理的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
