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是异步的。你从互联网上订了一个比萨饼，然后在你到达你家之前尝试吃披萨。在吃之前你必须等待披萨出现。 AKA，在数据存在之前，您无法调用您的函数。因此，当您设置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!!!!

基本呼叫功能故障排除

1 个答案: