Question

当我使用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);

Answer 1

这很可能与AJAX调用本身无关。如果您尝试从成功函数中删除所有$("#online_clients").html(html);等代码，我认为实际问题将会消失。

也就是说，实际的HTML重新定位和更新使浏览器“冻结”，直到它可以重新填充并重新显示页面。由于您同时进行了3-4次此类调用，因此可以预期此行为。

我的建议是只更新您真正需要的内容以及何时需要它。可能链接那些AJAX调用，因此它们不会一起启动，在它们之间进行人为暂停，或者只是根据需要真正更新部分元素。

Answer 2

您的代码将始终执行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()函数，我们可以执行下一个命令。下一个命令完成后，我们调用.done()函数并设置9秒的超时时间来重新调用整个函数。

唯一的问题是数据不会每9秒精确刷新一次，但每次都会刷新：9秒+第一个ajax响应时间+第二个ajax响应时间。根据你的ajax查询的速度，时间不应该是明显的，并且最终会在10-11秒左右。

当ajax工作时，页面冻结

2 个答案: