ajax實時刷新處理

做爲一個老前端,本案例是基於jquery來寫的。php

前端渲染頁面拿數據,無非就是ajax、socket,其餘的暫時沒有用過,但項目仍是使用ajax比較多。前端

下面來看一下一個簡單基於ajax短輪詢的請求jquery

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請求堆積,近而引起不可估量的問題,那麼怎樣去避免這個問題呢?ajax

方式一:給請求賦上一個變量,而後每次輪詢先abort掉上一個請求json

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了,但做爲前端的咱們要不斷的去尋找更合適的方式,因此有個下面這個。socket

方式二:每一次輪詢都判斷上一次請求是否完成,完成了纔會執行下一次的請求(推薦)ide

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}); 表示前面一個條件正確,則執行&&後面的方法url

正常的寫法是spa

if(isLoaded) req({"init": 0});

另外注意一點:isLoaded=true 要在complete里加,若是隻在success里加的話, 請求失敗了就不會輪詢再請求了。complete無論success或error都會執行code

代碼就到這裏了,thank you for attention~

圖片描述

相關文章
相關標籤/搜索