Отображать значок загрузки один раз во время ожидания вызова AJAX

Question

Я заполняю таблицу данными, которые автоматически обновляются каждые 4 секунды, используя AJAX. Я хочу отобразить сообщение о загрузке в ожидании загрузки 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) {

    }
});