javascript奇怪的加载器行为

Question

我的页面加载器有一个奇怪的行为，我第一次加载页面时出现并在完成加载时消失，下次我不加载整个页面但每 30 秒从 db 获取数据以更新加载器不再出现映射数据。使调试 console.log 始终正常工作，当我删除 ajax 调用时，加载程序开始正常工作，在 loadTracking 中添加一个 settimeout 以隐藏加载程序。我认为ajax调用有问题，但我不明白是什么。谢谢

body 之后的加载器 div

<div id="loader"></div>

加载器的css

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

然后我有一个 javascript 代码来管理谷歌地图

    function initMap() {
// init of map 
    google.maps.event.addListener(map, 'tilesloaded', function () {
            if (!this.loaded) {
              this.loaded = true;
              displayAndWatch();
            }
          });
    function displayAndWatch() {
            loadTracking();
            if (boundsExists == 1) {
              map.fitBounds(bounds);
            }
            updateTracking();
          }
    
          function updateTracking() {
            setInterval(loadTracking, 30000);
          }

function loadTracking() {
        $('#loader').show();
        console.log('Start loading...');

$.ajax({
          type: "GET",
          dataType: 'json',
          async: false,
          cache: false,
          url: "/schedules/tracking-data/",
          complete: function () {
            console.log('End loading...');
            $('#loader').hide();
          },
success: function(data){
// some operations
}
});

// i have other 3 ajax call inside this function but only the first have the loader hide
}
    
    }

Answer 1

我发现了问题，设置 async: true 所有的 ajax 调用它就像一个 sharm 我不知道为什么但它工作。