javascript 奇怪的加载器行为

Question

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

加载器 div 在 body 之后

<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 都称它工作得像一个沙姆我不知道为什么但它工作。