Pure Javascript ループ内に同期通信と非同期通信が入り混じっており、途中で値が変わってしまう

Question

追記

renderExGadget()の部分で、callApi前後で値が書き換わっていることを直したい。
iの値をcallApi前後でやってみると、値が異なる。

原因（たぶん）

ループ処理内に非同期通信と同期通信が入り混じっており、正しくループさせられていないこと

実現させたいこと

HTMLファイルに下記のScriptタグを挿入すると、某サイトのAPIを元にして作られたプラグインが表示されること

<script src="plugin.js" class="ex-plugin" data-id="12345678"></script>

function xhrSuccess () { this.callback.apply(this, this.arguments); }
function xhrError () { console.error(this.statusText); }
function callApi(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.callback = callback;
  xhr.arguments = Array.prototype.slice.call(arguments, 2);
  xhr.onload = xhrSuccess;
  xhr.onerror = xhrError;
  xhr.open("get", url, true);
  xhr.send(null);
}

var xhr = new XMLHttpRequest();
var timerId = window.setTimeout(function() {
  xhr.abort();
}, 5000);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    window.clearTimeout(timerId);
    if (xhr.status == 200) { 
    }
  }
};

(function () {
  if (!window.exGadgetLoaded) {
      document.addEventListener("DOMContentLoaded", renderExGadget);
      window.exGadgetLoaded = true;
  }

    function renderExGadget() {
      var plugins = document.getElementsByClassName("ex-plugin");
      for (var i = 0; i < plugins.length; i++) {
        var plugin = plugins[i];
        var acmId = plugin.dataset.acmId;
        var apiUrl = "https://example.com/api?id=";
        callApi(apiUrl + acmId, function() {
          var name = document.createElement('div');
          var json = JSON.parse(this.responseText || "null");
          name.innerHTML = json.List[0].Name; // 変数json以降はパラメーター
          plugin.parentNode.insertBefore(name, plugins[j].nextSibling);
        });
      }
    }
})();

Comments

[kei344]

「正しくループ」が具体的にどのような処理で、現在どうなっているかを追記してください。

[spellbound]

承知しました。

Answer 1

ちょっと私が勘違いしているかもしれませんが、こういうことでしょうか。

for (var i = 0; i < plugins.length; i++) {
  var plugin = plugins[i];
  var acmId = plugin.dataset.acmId;
  var apiUrl = "https://example.com/api?id=";
  ( function( plugin, url, index ) {
    callApi( url, function() {
      var name = document.createElement('div');
      var json = JSON.parse(this.responseText || "null");
      name.innerHTML = json.List[0].Name; // 変数json以降はパラメーター
      plugin.parentNode.insertBefore(name, plugins[ index ].nextSibling); // ここがJになっていた
    });
  } )( ppp, apiUrl + acmId, i );
}

Comments

[spellbound]

ありがとうございます！