Ajax のリアルタイム更新処理を見てみましょう-jsチュートリアル-php.cn

ajax チュートリアルリアルタイム更新処理のコラム紹介

Ajax のリアルタイム更新処理を見てみましょう

古いフロントエンドとして、このケースは次のように書かれていますjQueryに基づいています。

フロントエンドレンダリングページは、データの取得に ajax とソケットのみを使用します。その他は当面使用されていませんが、プロジェクトでは依然として 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 リクエストが蓄積され、やがて計り知れない問題が発生します。

方法 1: リクエストに変数を割り当て、ポーリングされるたびに前のリクエストを中止します。

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);

ログイン後にコピー

一見すると、大丈夫、ほぼ大丈夫のように思えますが、前線としてはもっと適切な方法を探し続ける必要があるので、以下にその方法を示します。

方法 2: 各ポーリングによって前のリクエストが完了したかどうかが判断され、次のリクエストは完了した後にのみ実行されます(推奨)

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});は、前の条件が正しいことを意味し、&& 以降のメソッドが実行されます。

通常の記述方法は