在另一个脚本中使用JS返回

Question

我正试图返回一个股票的同行比较表。它的工作原理是，我有一个脚本，询问AAPL的可比公司是什么，还有一个函数，把该组的快速比率抓取，然而，我似乎无法弄清楚如何让第二个脚本使用第一个脚本的响应。

脚本1，抓取同行。

 <script>
  function peerGroup() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var peerGroup = JSON.parse(this.responseText);
      var peer1 = document.getElementById("peer1").innerHTML = peerGroup[0];
      document.getElementById("peer2").innerHTML = peerGroup[1];
      document.getElementById("peer3").innerHTML = peerGroup[2];
      document.getElementById("peer4").innerHTML = peerGroup[3];
    }

  };
  xhttp.open("GET", "https://cloud.iexapis.com/stable/stock/aapl/peers?token=pk_6925213461cb489b8c04a632e18c25dd", true);
  xhttp.send(); 
  };

</script>

脚本2，使用脚本1返回的比率

<script>
var peer = peerGroup.peer1
function peerAnalysis() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var peerAnalysis = JSON.parse(this.responseText);
      document.getElementById("peer1-quickRatio").innerHTML = peerAnalysis[0]["quickRatio"].toFixed(2);
    }
  };
  xhttp.open("GET", "https://fmpcloud.io/api/v3/ratios/"+peer+"?period=quarter&apikey=4a913b138c66a8ba8885339480785676", true);
  xhttp.send();
};

</script>

超文本标记语言

<div id=peer1>
</div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
      peerGroup();
    },true);
    </script>
<div id=peer1-quickRatio>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
  peerAnalysis();
},true);
</script>

Answer 1

你需要把peerGroup存储在一个全局变量中，比如。

window.peerGroup = peerGroup

然后像这样访问它

var peer = window.peerGroup.peer1

注意：您正在加载两个执行异步操作的脚本，当您的第二个脚本加载时，peerGroup可能无法使用。 peerGroup可能在第二个脚本加载时不可用。你可以通过在第二个脚本上设置一个超时来解决这个问题。或者--正确的解决方案--当你得到peerGroup的时候，发出一个事件。

Answer 2

你的代码中包含了少许不好的做法。你很容易招致竞赛条件和副作用。我的建议是一定要声明一个状态，然后相应地改变页面，就像react（也许是redux？）做的那样。你可以处理异步事件并预测正在发生的事情。像这样的普通js实现可能会成为一个噩梦，你甚至直接处理DOM，这种混合肯定会容易出错。这是应该尽可能避免的，尤其是当你期望让你的架构比这更复杂的时候。

https:/redux.js.orgadvancedasync-actions

Answer 3

我能够解决这个问题。虽然我不确定这样的做法是否是最好的。我将peerGroups设置为存储在 sessionStorage 然后在peerAnalysis脚本的异步加载时动态地回调它们。