ホームページ >ウェブフロントエンド >jsチュートリアル >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 } );
は、前の条件が正しいことを意味し、&& 以降のメソッドが実行されますisLoaded && req({"init": 0});
表示前面一个条件正确,则执行&&后面的方法
正常的写法是
if(isLoaded) req({"init": 0});
另外注意一点:isLoaded=true
rrreeeです
別の注意:isLoaded=true
を追加する必要があります成功した場合のみ完了。 Riga の場合、リクエストが失敗した場合、ポーリングは行われず、再度リクエストされます。成功またはエラーに関係なく、complete が実行されますコードはここで終了です、ご注目いただきありがとうございます~
以上がajaxリアルタイムリフレッシュ処理の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。