替代JavaScript的setInterval吗？

Question

我需要实时显示我的内容，但是当加载这么多东西时，它占用了太多的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);
            });
        });
    });
});

Answer 1

在不使用websocket的情况下，您可以做两件主要的事情来提高代码的性能。

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

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

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

Answer 2

(function loop() {
  // do the logic here
  ...
  ...
  setTimeout(loop, 1000); //recurse
})(); // doesn't need to trigger the function.

Answer 3

如果您正在编写html5站点，则可以以非常快的速度使用WebWorkers，否则，应使用jQuery $.when()和setTimeout 。 当然，您可以使用websocket，但是如果您不熟悉websocket，可以使用以下解决方案提高性能。

$(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);
        });
    })();
});