Question

我有一个脚本，该脚本从json数据中调用以显示在给定时间谁在网页上。我有一个函数在页面的底部被调用一次。然后有一个计时器，每5秒调用一次。

最初运行代码时，什么都没有发生。 alert(visListHtml);为空。但是当它在计时器上运行时，tt可以正常工作。

您知道什么导致它在第一次运行时为空吗？ Google DEV工具显示getJSON返回的数据。如果我在for循环中添加了警报。每次弹出时都会弹出。

这只是它第一次运行，它什么也没做。 visListHtml为空。我有以下代码：

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {

        $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {

          for (i in allStatusJSON.websiteVisitor) {
                visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
                vistime     = allStatusJSON.websiteVisitor[i].vistime;
                visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
                visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;

                visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';

            }
        });

            alert(visListHtml);

            if (prev_GetLiveVisitorList != visListHtml) {
                document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
                prev_GetLiveVisitorList = visListHtml;
            }
     }

Answer 1

我缩进了代码，并在代码中解释了正在发生的事情。在两种情况下（第一次使用计时器然后都无法使用）：

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {
  $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {
    for (i in allStatusJSON.websiteVisitor) {
      visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
      vistime     = allStatusJSON.websiteVisitor[i].vistime;
      visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
      visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;
      visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';
    }
  });

  /**
  * First time visListHtml is empty because AJAX call is happening async below this line
  * When you said using the timer works, it's not working, is showing the result of the first time well
  * but is not showing the result of the second real time
  **/
  alert(visListHtml);

  if (prev_GetLiveVisitorList != visListHtml) {
    document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
    prev_GetLiveVisitorList = visListHtml;
  }
}

visListHtml初始化为空字符串，这是第一次显示，因为$ .JSON正在异步运行并且仍然没有数据
使用计时器，“工作正常”表示“ visListHtml”已由第一个$ .JSON调用填充，并显示该调用的结果，但未显示由计时器触发的当前$ .JSON。
要修复此问题，您需要在$ .JSON修改DOM或执行您真正需要的操作后使用visListHtml 希望这会有所帮助：））

仅在函数运行一次之后，JavaScript才起作用

1 个答案: