JavaScript的替代方案'；什么时间间隔？

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

---

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

首先，在处理重复出现的ajax请求时，将

setInterval

替换为

setTimeout

。这样做的原因是，如果您使用的是

setInterval

，那么下一个可能会在前一个完成之前发送，这最终会导致浏览器崩溃。使用

setTimeout

，您可以确保在请求下一个之前完成上一个

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

---

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

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

首先，在处理重复出现的ajax请求时，将

setInterval

替换为

setTimeout

。这样做的原因是，如果您使用的是

setInterval

，那么下一个可能会在前一个完成之前发送，这最终会导致浏览器崩溃。使用

setTimeout

，您可以确保在请求下一个之前完成上一个

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

---

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

如果你正在编写html5网站，你可以使用wich，它速度非常快，否则，你应该使用jQuery

$。when（）

和

设置超时

。当然，您可以使用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);
        });
    })();
});

---

如果你正在编写一个html5网站，你可以使用wich，它的速度非常快。否则，你应该使用jQuery

$.when（）

和

setTimeout

。当然，您可以使用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);
        });
    })();
});

---

不要使用setInterval，而是使用setTimeout和函数。将这些请求合并为少量的请求。node.js的优点在于它不是一种完全不同的语言。这和你在这里用的是同一个，不是这个，这是solution@programminginallston你为什么要告诉他使用node.js？Node与他的问题没有任何关系，也不能以任何方式帮助他解决这个问题。这是node的问题域。两个词：…@BenjaminGruenbaum他不是，他只是说node.js不是一种新语言。他特别指出，这不是解决这个问题的方法。不要使用setInterval，而是使用setTimeout和函数。将这些请求合并为少量的请求。node.js的优点在于它不是一种完全不同的语言。这和你在这里用的是同一个，不是这个，这是solution@programminginallston你为什么要告诉他使用node.js？Node与他的问题没有任何关系，也不能以任何方式帮助他解决这个问题。这是node的问题域。两个词：…@BenjaminGruenbaum他不是，他只是说node.js不是一种新语言。他明确表示，这不是解决这个问题的办法。这将如何提高性能？问题是在不等待回调的情况下重复多个AJAX调用。这将如何提高性能？问题是重复多个AJAX调用，甚至没有等待回调。我做到了，谢谢。但有时当我使用setInterval或setTimeout时，它们都不显示。为什么会发生这种情况？您必须根据具体情况进行调试。它无法出现的原因有很多。服务器可能会返回您不期望的内容，网络可能会变慢并超时，可能会发生服务器错误，可能会发生js错误，可能是您有逻辑错误，请求完成时目标元素不存在，等等。我做到了，谢谢。但有时当我使用setInterval或setTimeout时，它们都不显示。为什么会发生这种情况？您必须根据具体情况进行调试。它无法出现的原因有很多。服务器可能会返回您不期望的内容，网络可能会变慢并超时，可能会发生服务器错误，可能会发生js错误，可能是逻辑错误，请求完成时目标元素不存在，等等。