1

当我将 ajax 与 jquery 一起使用时，页面在 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 调用本身无关。如果您尝试$("#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 秒刷新一次 + 第一个 ajax 响应时间 + 第二个 ajax 响应时间。根据您的 ajax 查询的速度，时间量不应该很明显，最终会在 10-11 秒左右。

于 2013-10-11T12:16:05.200 回答