javascript - 基本通话功能故障排除

Question

如何获取函数 checkViewers();能正常工作吗？我相信我在 JS 文档文件中调用它是错误的，因此 JS 无法正确读取该函数。

当前代码:

//Content Viewer Information
function checkViewers() {

  //Base Variables
  var viewer = $('#viewed span.user');
  var totalViews = $('#viewed span.user').length;
  var shortenViews = $('#viewed span.user').length -1;

  if (totalViews === 0) {
      $('<span> 0 people have </span>').insertBefore($('#viewed span:last-child'));
  }
  if (totalViews === 2) {
      $('<span> and </span>').insertAfter(viewer.first());
  }
  if (totalViews >= 3) {
      viewer.slice(1).hide();
      $('<span> and </span>').insertAfter(viewer.first());
      $('<span class="user count"></span>').insertAfter(viewer.eq(2));
      $('.count').html(shortenViews + ' more people');
  }

}

在调用 JSON 数据后，该函数将在剩余 JS 的底部被调用。

理想情况下，JSON 数据应输入到 HTML 中，并且该函数应捕获观看者的数量。然后，这将影响查看者在 HTML 中的显示方式(根据列出的查看者数量)。

查看Plunker .

Answer 1

将我的评论作为答案:

Ajax 是异步的。您从互联网上订购了一份披萨，并尝试在披萨到达您家之前吃掉它。你必须等待披萨出现才能吃。也就是说，在数据存在之前您无法调用您的函数。所以当你设置 html 时，你调用你的函数

xhr.onload = function() {  //<--Function is called when the Pizza shows up at your door and the doorbell rings
     ...  //removed a bunch of code....
     //Update Page With New Content
      var viewerSection = $('#viewed');
      viewerSection.html(newViewers);  //You open up the pizza box
      checkViewers(); //<--- MOVE IT HERE, The pizza is here!!!!    
  }
};

xhr.open('GET', 'data.json', true);   //<-- You set up your pizza order
xhr.send(null);  //<--You make the pizza purchase 

//checkViewers();  <-- PIZZA IS NOT HERE!!!!