等待AJAX​​通话时显示一次加载图标

Question

我正在向表中填充数据，这些数据会使用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秒显示一次的代码。

Answer 1

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

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

    }
});