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

您可以采取两项主要措施来提高代码的性能，而无需转移到websockets。

首先，在处理重复的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。当然你可以使用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); }); })(); });

JavaScript setInterval的替代方案？

3 个答案: