ajaxリアルタイムリフレッシュ処理の実装方法-jsチュートリアル-php.cn

ajaxリアルタイムリフレッシュ処理の実装方法

一个新手

リリース： 2017-10-26 10:29:58

オリジナル

4266 人が閲覧しました

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

データを取得するフロントエンドのレンダリングページは、ajax とソケットにすぎません。その他はまだ使用されていませんが、プロジェクトではまだ ajax が多く使用されています。

Ajaxショートポーリングに基づいた簡単なリクエストを見てみましょう

function req() {
    $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req();
setInterval(req, 3000);

ログイン後にコピー

ネットワーク速度が速くて安定している場合は、このように使用できますが、ネットワーク速度が不安定な場合、誰がネットワーク速度を決定できるでしょうか?インターフェイスには 5 ～ 10 秒かかります。これにより、Ajax リクエストが蓄積され、計り知れない問題が発生します。では、この問題を回避するにはどうすればよいでしょうか。

方法 1: リクエストに変数を割り当て、各ポーリングでリクエストを中止します

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        beforeSend: function() {
            if(isLoading) {
                $(&#39;.zh-loading&#39;).show();
            }
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(isLoading) {
                $(&#39;.zh-loading&#39;).hide();
            }
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

ログイン後にコピー

一見すると、問題ない、ほぼ問題ないように思えますが、フロントエンドとして、適切な変数を常に探す必要があります。方法としては、次のとおりです。

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

var isLoaded = false;
function req(opts) {
    $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        beforeSend: function() {
            if(opts.init === 1) {
                $(&#39;.zh-loading&#39;).show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $(&#39;.zh-loading&#39;).hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

ログイン後にコピー

上記の isLoaded && req({"init": 0 } ); は、前の条件が正しいことを意味し、&& 以降のメソッドが実行されますisLoaded && req({"init": 0}); 表示前面一个条件正确，则执行&&后面的方法

正常的写法是