javascript - 替代 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

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

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

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

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