SetInterval不能与setTimeout一起使用？

如何解决SetInterval不能与setTimeout一起使用？

我有一个API数据源（JSON），每60秒产生12个新结果。客户希望在网站的底部显示一个弹出窗口，说“ UserX刚刚从他们的应用程序中赚了$ y”。他们希望使用API​​中的真实数据，并且希望以半随机的方式显示结果，因此看起来“自然”。

所以-基本上每60秒，我想调用一次API以获取一组新的12条记录...，然后在接下来的60秒内，以随机间隔（在3之间- 7秒）。

到目前为止，这是我的代码：

  $(document).ready(function(){
      function gatherData() {
          $.ajax({
              dataType: "json",url: "https://www.somesite.com/api-endpoint",success: function(data) {
                  loopThroughData(data,0);
              }
          });
       }

       function loopThroughData(data,i) {

           var randomTime = Math.floor(Math.random() * (Math.floor(7000) - Math.ceil(3000)) + Math.ceil(3000));
  
           setTimeout(function(){
               var rewardString = name + " just earned "+data.currency+" " + data.currency_name + "s and $"+data.dollar_amount+" for the "+data.platform+". <span>"+data.location+"  - A few seconds ago</span>";
    
               $("#reward-body").empty().append(rewardString);
               $("#reward-notification").fadeIn('slow').delay(3000).fadeOut('slow');
    
               i++;
    
               if (i < 12) {
                   loopThroughData(data,i);
               }
           },randomTime);
       }

       var outerLoop = setInterval(gatherData(),60000);
  });

使用此代码，它确实会调用数据源，并以随机间隔循环遍历结果。但是，一旦它通过了最初的12个结果，就不会再次调用数据源。因此，似乎我的setInterval无法正常工作。我尝试使用定义变量（var = outsideLoop）以及不使用它来进行此操作，但这似乎没有什么不同。我还将60000 ms的时间调整为6000，以查看它是否多次调用了collectData（）函数。不会。

您可以在这里看到全部操作：https://codepen.io/johnhubler/pen/YzqGrGz

使用setTimeout否定了setInterval，还是我只是想念一些愚蠢的东西？任何帮助将不胜感激！