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 サイトの他の関連記事を参照してください。