做爲一個老前端,本案例是基於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~