在固定间隔内调用 AJAX 函数是否会减慢应用程序的速度

Does AJAX function call within regular intervals would slow down the application?

本文关键字：是否 应用程序 速度 函数 AJAX 调用      更新时间：2023-09-26

在特定页面的应用程序中，我连续使用 AJAX 函数调用，如下所示，

<script type="text/javascript">  
        $(document).ready(function(){   

            setInterval(function() {
                 $.ajax({  
                    url:'clmcontrol_livematchupdate',
                    type:'post', 
                    dataType: 'json',  
                    success: function(data) {  

                        $('#lblbattingteam').html(data.battingnow);
                        $('#lblscore').html(data.score);
                        $('#lblwickets').html(data.wickets);
                        $('#lblovers').html(data.overs);
                        $('#lblballs').html(data.balls);
                        $('#lblextras').html(data.extras);
                        $('#lblrr').html(data.runrate);
                        $('#lblbowlingteam').html(data.bowlingnow);
                        $('#lblbowler').html(data.currentbowler);
                        $('#lblbowlerovers').html(data.bowlerovers);
                        $('#lblbowlerballs').html(data.bowlerballs);
                        $('#lblrunsgiven').html(data.runsgiven);
                        $('#lblextrasgiven').html(data.extrasgiven);
                        $('#lblwicketstaken').html(data.wicketstaken);
                        $('#lblecon').html(data.econ);

                    }  
                });  
            }, 4000);
        });  
    </script>

无论如何，在第一次尝试时，应用程序运行良好，并且值按我的预期进行了更新，但是经过几次尝试后，值难以更新并且没有发生进一步的更新。是因为该函数由于连续的 ajax 调用而减慢了系统速度吗？

最好不要使用 setInterval（），因为如果第一个请求尚未完成并启动另一个请求，则最终可能会遇到多个请求消耗共享资源并相互饥饿的情况。您可以通过等待计划下一个请求直到最后一个请求完成来避免此问题。

试试：

(function ajaxInterval() {
      $.ajax({  
                url:'clmcontrol_livematchupdate',
                type:'post', 
                dataType: 'json',  
                success: function(data) {  

                    $('#lblbattingteam').html(data.battingnow);
                    $('#lblscore').html(data.score);
                    $('#lblwickets').html(data.wickets);
                    $('#lblovers').html(data.overs);
                    $('#lblballs').html(data.balls);
                    $('#lblextras').html(data.extras);
                    $('#lblrr').html(data.runrate);
                    $('#lblbowlingteam').html(data.bowlingnow);
                    $('#lblbowler').html(data.currentbowler);
                    $('#lblbowlerovers').html(data.bowlerovers);
                    $('#lblbowlerballs').html(data.bowlerballs);
                    $('#lblrunsgiven').html(data.runsgiven);
                    $('#lblextrasgiven').html(data.extrasgiven);
                    $('#lblwicketstaken').html(data.wicketstaken);
                    $('#lblecon').html(data.econ);

                },
                complete: function() {
                  // Schedule the next request when the current one has been completed
                  setTimeout(ajaxInterval, 4000);
                }  
            });
})();

这里有一个潜在的问题，如果您从调试器检查网络调用，这个问题会很明显。由于 ajax 调用的非阻塞异步行为，您有可能同时进行 ajax 调用。根据您的浏览器，您只能同时拨打这么多电话，以便它们排队。在这些情况下，也不能保证执行顺序。

在您的情况下，我会在 ajax 选项中设置async: false。通过在 setInterval 回调中执行，您已经获得了非接口阻塞行为。由于 setInterval 只是在方法调用之间应用计时器，因此在给定时间永远不会有多个 ajax 调用运行（这可能是问题的罪魁祸首）。

相关文章：