1
私はこの単純なアプリケーションの機能面を終了しましたが、今は良いUXも追加したいのでJSONがロードされている間に読み込みアニメーション（スピナー）約束の結果を表示する前に、私はグーグルで解決策を見つけることができません。約束がロードされて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')
});
あなたはスピナーを自分で作成しますか、それとも良いスピナープラグイン/ライブラリ/スニペットに向けるのですか？簡単に言えば、データのxhr呼び出しを送信する直前または直後に関数を呼び出して、データが返ってくると、スピンナを削除する必要があります。最悪の場合、あなたのhtmlの上に半透明の灰色のオーバーレイを置くだけなので、UIは（絶対位置など）ちょっと使えないので、cssルール 'cursor：wait;' – Shilly
を使ってカーソルポインタをデフォルトのスピナーに変更します@ Shilly私はスピナーを自分で作成したい、少なくともこの場合はライブラリと外部コードを避けたい。ですから、あなたは 'displayZones'関数の最初の' .then'で 'スピナーレンダリング関数'を呼び出さなければならないと言っていますか？私を訂正してもかまいません:) –
いいえ、最初の 'then'の前に、 'then'はデータが返ってくるときだけ解決します。したがって、コールバックパラメータをajax呼び出しに追加するか、ajax呼び出しで常にスピナーを表示させるか、非同期requestJSON.then（）を開始する前にコールします。最初の 'then'でスピナーを削除します。次のようなものです： 'function displayBosses（zoneID）{showSpinner（）; requestJSON（）。then（hideSpinner（）; data.find（....... ' – Shilly