等待 AJAX 调用时显示一次加载图标答案

【问题标题】：Display loading icon once while waiting for AJAX call等待 AJAX 调用时显示一次加载图标
【发布时间】：2019-04-22 11:42:49
【问题描述】：

我正在使用 AJAX 每 4 秒自动更新一次的数据填充一个表。我想在等待 AJAX 仅在初始页面加载时加载时显示加载消息。

目前我已设法显示加载消息，但每次通过 AJAX 更新数据时都会显示该消息（每 4 秒） - 我希望加载消息仅在 AJAX 初始加载之前显示在初始页面加载上.所有后续的 AJAX 更新都不应显示加载消息，因为表已经填充了数据。

<div id="loading" style="display: none;">Loading..</div>

<script type="text/javascript">
    $(document).ajaxStart(function(){
        $("#loading").show();
        }).ajaxStop(function() {
        $("#loading").hide();
    });
</script>

<script type="text/javascript">
    var auto_refresh = setInterval(
    function () {
        $('#load_onlineusers').load('/online_players.php').fadeIn("slow");
    }, 4000); 
</script>

<div id="load_onlineusers"> </div>

上面是导致加载消息每 4 秒显示一次的代码。

【问题讨论】：

是的，您的 ajax 调用每 4 秒触发一次，因此此时会显示加载图标。你现在想要什么？
您可以在页面加载时放置一个布尔标志，例如 messageShown = false，然后在显示消息时将该标志设置为 true。在再次显示消息之前，请务必事先检查标志值。
Show loading image while $.ajax is performed的可能重复
你能给我一个使用布尔标志的例子吗？我已经尝试过这种方法，但无法让它发挥作用。

标签： javascript php ajax

【解决方案1】：

使用beforeSend方法显示加载消息并使用全局变量控制：

var executed = false;
$.ajax({ url: "", 
    type: "", 
    data: "", 
    beforeSend: function() {
        if (!executed) {
            // Show loading
            executed = true;
        }
    },
    complete: function() {
        // Hide loading
    },
    success: function(data) {

    }
});

【讨论】：