页面在ajax工作时冻结。

Question

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

Answer 1

您的代码将一直在执行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();

使用.done()对象的jQuery Ajax函数，我们可以执行下一个命令。当下一个命令完成后，我们调用这个函数的.done()函数，并设置一个9秒的超时来重新调用整个函数。

唯一的问题是数据不是每9秒刷新一次，而是每9秒+1次ajax响应时间+2次ajax响应时间刷新一次。取决于ajax查询的速度，所需时间不应该很明显，最终将在10-11秒左右结束。

Answer 2

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

也就是说，正是实际的HTML重新定位和更新使浏览器“冻结”，直到它能够重新填充和重新显示页面。因为您同时执行3-4个这样的调用，所以这种行为是可以预料的。

我的建议是，只更新你真正需要的和当你真的需要它。可能会链接这些AJAX调用，这样它们就不会在一起启动，在它们之间造成人为的停顿，或者只是根据需要更新页面上的一些元素。