1

我需要实时显示我的内容，但是当加载这么多东西时，它会占用大量 CPU 并且非常滞后。

下面的代码有替代方法吗？

$(document).ready(function() {
    var refresh_bal = setInterval(
        function (){
            $.get('./php/get_balance.php', function(balance) {
                $('.balance').html(balance);
            });
        }, 1000);

    var refresh_total = setInterval(
        function (){
            $.get('./php/get_total_bets.php', function(total) {
                $('.total').html(total);
            });
        }, 1000);

    var refresh_profit = setInterval(
        function (){
            $.get('./php/get_profit.php', function(profit) {
                $('.profit').html(profit);
            });
        }, 1000);

    $('.haa').on('click', function() {
        var refresh_bets = setInterval(
            function (){
                $.get('./php/get_bets.php', function(bets) {
                    $('.betsTable').html(bets);
                });
            }, 1000);
    });

    var refresh_site = setInterval(function (){
        $.get('./php/get_site.php', function(site) {
            $('.siteStats').html(site);
        });
    }, 1000);

    var refresh_client = setInterval(function (){
        $.get('./php/get_client.php', function(client) {
            $('.clientShow').html(client);
        });
    }, 1000);

    var refresh_server = setInterval(function (){
        $.get('./php/get_server.php', function(server) {
            $('.serverShow').html(server);
        });
    }, 1000);

    $('.ha').on('click', function() {
        var refresh_chat = setInterval(function() {
            $.get('./php/get_chat.php', function(chats) {
                $('.chats').html(chats);
            });
        });
    });
});
4

3 回答 3

8

在不迁移到 websocket 的情况下，您可以做两件事来提高代码的性能。

首先，在处理重复出现的 ajax 请求时替换setInterval为。setTimeout这样做的原因是，如果您正在使用setInterval，则下一个可能会在上一个完成之前发送，这最终可能会使浏览器崩溃。使用setTimeout，您可以确保在请求下一个之前完成前一个。

(function refreshBalance() {
    $.get('./php/get_balance.php', function(balance) {
        $('.balance').html(balance);
        setTimeout(refreshBalance,1000);
    });
})();

接下来，将所有这些请求合并为尽可能少的请求，最好是一个。这是因为对于您发出的每个请求，还必须重新发送标头和 cookie，并且浏览器确实对一次可以发送到单个域的最大并发 http 请求数有限制。如果达到上述限制，ajax 请求将被延迟，直到之前的请求完成。这也可以锁定浏览器。

于 2013-08-07T20:00:29.880 回答
1

如果你正在编写一个 html5 网站，你可以使用WebWorkers，它的速度非常快，否则你应该使用 jQuery$.when()和setTimeout. 当然，您可以使用 websockets，但如果您不熟悉它，这里有一个可以提高性能的解决方案。

$(function() {
    function refresh_bal(){
        return $.get('./php/get_balance.php', function(balance) {
            $('.balance').html(balance);
        });
    }

    function refresh_total(){
        return $.get('./php/get_total_bets.php', function(total) {
            $('.total').html(total);
        });
    }

     function refresh_profit(){
        return $.get('./php/get_profit.php', function(profit) {
            $('.profit').html(profit);
        });
    }

    function refresh_site(){
        return $.get('./php/get_site.php', function(site) {
                $('.siteStats').html(site);
            });
    }

    function refresh_client() {
        return $.get('./php/get_client.php', function(client) {
            $('.clientShow').html(client);
        });
    }

    function refresh_server() {
        return $.get('./php/get_server.php', function(server) {
             $('.serverShow').html(server);
        });
    }

    (function refresh() {
        $.when(refresh_bal(), refresh_total(), refresh_profit(), refresh_site(), refresh_client(), refresh_server()).then(function() {
            setTimeout(refresh, 1000);
        });
    })();

        $('.ha').on('click', function() {
            var refresh_chat = function() {
                $.get('./php/get_chat.php', function(chats) {
                    $('.chats').html(chats);
                    setTimeout(refresh_chat, 1000);
                });
            };
        });

        $('.haa').on('click', function() {
            var refresh_bets = function (){
                $.get('./php/get_bets.php', function(bets) {
                   $('.betsTable').html(bets);
                   setTimeout(refresh_bets, 1000);
                });
            };
    });

});

编辑

您还可以对包含所有 php 文件的 php 进行单个 ajax 调用，并回显包含所有值的 json。

$(function() {
   (function refresh() {
        $.getJSON('./php/op.php', function(data) {
            $('.balance').html(data.balance);
            $('.total').html(data.total);
            $('.profit').html(data.profit);
            ...
            setTimeout(refresh, 1000);
        });
    })();
});
于 2013-08-07T20:27:30.187 回答
1 
(function loop() {
  // do the logic here
  ...
  ...
  setTimeout(loop, 1000); //recurse
})(); // doesn't need to trigger the function.
于 2013-08-07T19:56:54.093 回答