1

jqueryでajaxを使用すると、ajaxの動作中にページがフリーズし、3〜4秒後にデータが受信されました。ajax 関数に時間間隔を設定して、数秒後に何度も実行すると、ページが非常に遅くなります。

どうすればこれを防ぐことができますか?

私が使用するコードを以下に示します。

    function show_clt() {
        $.ajaxSetup({
            async: true
        });
        $.ajax({
            type: "GET",
            url: "online_clients.php",
            //data: dataString,
            cache: false,
            success: function(html) {
                $("#online_clients").html(html);
            } 
        });
        var dataString = "e_id=<?=$employer_id; ?>";            
        $.ajax({
            type: "GET",
            url: "online_employer.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#online_employer").html(html);
            }
        });
    }

    show_clt();
    setInterval(function() {
        $.ajaxSetup({
            async: true
        });
        //var di_scroll = $('#client_main').scrollTop(); alert(di_scroll);

        $.ajax({
            type: "POST",
            url: "online_clients.php",
            //data: dataString,
            cache: false,
            success: function(html) {
                $("#online_clients").html(html);
                //$('#client_main').scrollTop(60);
            } 
        });
        var dataString = "e_id=<?=$employer_id; ?>";
        $.ajax({
            type: "POST",
            url: "online_employer.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#online_employer").html(html);
            }
        });
    }, 9000);
4

2 に答える 2

0

これは、おそらく AJAX 呼び出し自体とは関係ありません。成功関数から etc. コードをすべて削除しようとする$("#online_clients").html(html);と、実際の問題はなくなると思います。

とはいえ、実際の HTML の再配置と更新により、ブラウザがページを再読み込みして再表示できるようになるまで「フリーズ」します。このような呼び出しを同時に 3 ～ 4 回行っているため、この動作は予期されたものです。

私の提案は、本当に必要なものだけを更新し、本当に必要なときに更新することです。おそらくこれらの AJAX 呼び出しを連鎖させて、それらが一緒に起動したり、それらの間に人為的な一時停止を作成したり、必要に応じてページ上の要素の一部を実際に更新したりしないようにします。

于 2013-10-11T11:49:06.853 に答える
0

コードは、終了したかどうかに関係なく、常に ajax 関数を実行します。これらのクエリが完了するまでに時間がかかる場合、多くのクエリが同時に実行される可能性があります。

以下のコードはクエリをチェーンして、前のクエリが完了した後にのみ実行されるようにします。

    function show_clt() {
        $.ajaxSetup({
            async: true
        });
        $.ajax({
            type: "GET",
            url: "online_clients.php",
            //data: dataString,
            cache: false,
            success: function(html) {
                $("#online_clients").html(html);
            }
        }).done(function(msg) {
            var dataString = "e_id=<?=$employer_id; ?>";            
            $.ajax({
                type: "GET",
                url: "online_employer.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#online_employer").html(html);
                }
            }).done(function(msg) {
                setTimeout(function(){ show_clt() }, 9000);
            });
        });
    }

    show_clt();

jQuery Ajaxオブジェクトの.done()関数を使用して、次のコマンドを実行できます。次のコマンドが完了したら、これで関数を呼び出し、9 秒のタイムアウトを設定して、この関数全体を再呼び出しします。.done()

これに関する唯一の問題は、データが正確に 9 秒ごとに更新されるわけではなく、9 秒 + 1 番目の ajax 応答時間 + 2 番目の ajax 応答時間ごとに更新されることです。ajax クエリの速度にもよりますが、時間はそれほど気にならず、最終的には 10 ～ 11 秒ほどかかります。

于 2013-10-11T12:16:05.200 に答える