添加加载动画，而承诺加载并显示JSON

我完成了这个简单的应用程序的功能，但现在我想添加一些很好的用户体验，所以我想添加加载动画（微调），而JSON加载并在显示承诺的结果之前，但我似乎无法通过Google搜索找到解决方案。添加加载动画，而承诺加载并显示JSON

这是笔：https://codepen.io/kresimircoko/pen/ZLJjVM。

下面是JavaScript代码：

const API_KEY = '?api_key=625023d7336dd01a98098c0b68daab7e'; 
const root = 'https://www.warcraftlogs.com:443/v1/'; 
const zonesBtn = document.querySelector('#zones'); 
const responseList = document.querySelector('#response'); 
console.clear(); 

const requestJSON = objType => { 
    return new Promise((resolve, reject) => { 
     const xhr = new XMLHttpRequest(); 
     xhr.onload = function() { 
      try { 
       resolve(JSON.parse(this.responseText)); 
      } 
      catch (e) { 
       reject(e); 
      } 
     }; 
     xhr.onerror = reject; 
     xhr.open('GET', root + objType + API_KEY); 
     xhr.send(); 
    }); 
}; 

function displayBosses(zoneID) { 
    let bosses = document.querySelectorAll(`.bosses[data-zoneid="${zoneID}"]`); 
    requestJSON('zones') 
     .then(data => { 
      let output = ''; 
      data.find(zone => 
       zone.id === parseInt(zoneID, 10) 
      ).encounters.map(encounter => { 
       output += `<li class="boss" data-zoneid="${zoneID}">${encounter.name}</li>`; 
       bosses.forEach(boss => { 
        boss.innerHTML = output; 
       }); 
      }).join(''); 
    }); 
} 

function displayZones() { 
    let output = ''; 
    requestJSON('zones') 
     .then(zones => { 
      return zones.map(zone => { 
       output += ` 
        <ul data-zoneid="${zone.id}" class="zones"> 
         <span>${zone.name}</span> 
         <ul data-zoneid="${zone.id}" class="bosses"></ul> 
        </ul>`; 
       response.innerHTML = output; 
      }).join(''); 
     }) 
     .then(responseList.style.display = 'flex'); 
} 

zonesBtn.addEventListener('click', displayZones); 
responseList.addEventListener('click', evt => { 
    const target = evt.target.parentElement; 
    const zoneID = target.dataset.zoneid; 
    displayBosses(zoneID); 
    if (target.classList.contains('clicked')) 
     target.classList.remove('clicked'); 
    else 
     target.classList.add('clicked') 
});

来源

2017-01-30 Krešimir Čoko

你打算自己创建一个spinner，还是把你引导到一个好的spinner plugin/library/snippet的问题？简而言之，您需要在发送xhr调用数据之前或之后调用函数来渲染微调器，然后在数据返回时移除微调器。最糟糕的情况是，只需在你的html顶部放置一个半透明的灰色覆盖层，这样用户界面（位置绝对等）有点不可用，并且使用css规则将游标指针更改为默认微调器：cursor：wait;' – Shilly

@Shilly我会自己创建Spinner，我想避免库和外部代码，至少在这种情况下。所以你说的是我应该在'displayZones'函数的第一个'.then'中调用'spinner rendering function'？随时纠正我:) –

不，在第一个'然后'之前，因为'然后'只会在数据返回时解决。所以要么给你的ajax调用添加一个回调参数，要么让ajax调用总是显示一个微调，或者在你启动异步之前调用它。requestJSON.then（）你需要在第一个'then'中再次删除微调器。有点像：'function displayBosses（zoneID）{showSpinner（）; requestJSON（）。然后（hideSpinner（）; data.find（.......' – Shilly

的微调被包裹在一个spinner DIV为此我们控制display属性显示了单击该按钮时，却隐藏着一个FontAwesome图标时promise已解决。

function displayZones() { 
    if (!this.classList.contains('open')) { 
     spinner.style.display = 'block'; 
     this.classList.add('open'); 
    } 
    let output = ''; 
    requestJSON('zones') 
     .then(zones => { 
      spinner.style.display = 'none'; 
      return zones.map(zone => { 
       output += ` 
        <ul data-zoneid="${zone.id}" class="zones"> 
         <span>${zone.name}</span> 
         <ul data-zoneid="${zone.id}" class="bosses"></ul> 
        </ul>`; 
       response.innerHTML = output; 
      }).join(''); 
     }) 
     .then(responseList.style.display = 'flex'); 
}

来源

2017-01-30 12:57:59

添加加载动画，而承诺加载并显示JSON

回答

相关问题