追記
renderExGadget()の部分で、callApi前後で値が書き換わっていることを直したい。
iの値をcallApi前後でやってみると、値が異なる。
原因(たぶん)
ループ処理内に非同期通信と同期通信が入り混じっており、正しくループさせられていないこと
実現させたいこと
HTMLファイルに下記のScriptタグを挿入すると、某サイトのAPIを元にして作られたプラグインが表示されること
html
1<script src="plugin.js" class="ex-plugin" data-id="12345678"></script>
javascript
1function xhrSuccess () { this.callback.apply(this, this.arguments); } 2function xhrError () { console.error(this.statusText); } 3function callApi(url, callback) { 4 var xhr = new XMLHttpRequest(); 5 xhr.callback = callback; 6 xhr.arguments = Array.prototype.slice.call(arguments, 2); 7 xhr.onload = xhrSuccess; 8 xhr.onerror = xhrError; 9 xhr.open("get", url, true); 10 xhr.send(null); 11} 12 13var xhr = new XMLHttpRequest(); 14var timerId = window.setTimeout(function() { 15 xhr.abort(); 16}, 5000); 17xhr.onreadystatechange = function() { 18 if (xhr.readyState == 4) { 19 window.clearTimeout(timerId); 20 if (xhr.status == 200) { 21 } 22 } 23}; 24 25(function () { 26 if (!window.exGadgetLoaded) { 27 document.addEventListener("DOMContentLoaded", renderExGadget); 28 window.exGadgetLoaded = true; 29 } 30 31 function renderExGadget() { 32 var plugins = document.getElementsByClassName("ex-plugin"); 33 for (var i = 0; i < plugins.length; i++) { 34 var plugin = plugins[i]; 35 var acmId = plugin.dataset.acmId; 36 var apiUrl = "https://example.com/api?id="; 37 callApi(apiUrl + acmId, function() { 38 var name = document.createElement('div'); 39 var json = JSON.parse(this.responseText || "null"); 40 name.innerHTML = json.List[0].Name; // 変数json以降はパラメーター 41 plugin.parentNode.insertBefore(name, plugins[j].nextSibling); 42 }); 43 } 44 } 45})(); 46
回答1件
あなたの回答
tips
プレビュー