添加加載動畫，而承諾加載並顯示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

回答

相關問題